vue右键点击菜单,vue 左侧菜单

　　本文主要详细介绍vue原生方法的自定义右键菜单。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了vue原生方法自定义右键菜单的具体代码，供大家参考。具体内容如下

　　1.在需要右击的页面上绑定contextmenu事件(阻止浏览器默认事件，添加自定义事件)。

　　div @ context menu . prevent . native= openMenu($ event)

　　.

　　/div

　　2.在页面上写下右键菜单的内容

　　ul v-show= visible :style= { left:left px ，top:top px } class= context menu

　　Li @click=test 添加节点/li

　　Li @click=test 添加节点/li

　　/ul

　　3.在数据()中定义所需的变量属性

　　data() {

　　返回{

　　可见：假，

　　top: 0，

　　左侧：0

　　}

　　}

　　4.创建一个监听事件来触发关闭右键菜单的方法。

　　观察：{

　　可见(值){

　　如果(值){

　　document . body . addevent listener( click ，this.closeMenu)

　　}否则{

　　document . body . removeeventlistener( click ，this.closeMenu)

　　}

　　}

　　},

　　5.打开和关闭右键菜单的两种方式

　　//开始

　　打开菜单(e) {

　　var x=e.pageX

　　var y=e.pageY

　　this . top=y；

　　this . left=x；

　　this.visible=true//在此控制右键菜单的打开

　　},

　　//关闭

　　closeMenu() {

　　this.visible=false

　　},

　　6.风格。上下文菜单{

　　边距：0；

　　背景：# fff

　　z指数：3000；

　　位置：绝对；

　　list-style-type:无；

　　填充：5px 0；

　　边框-半径：4px

　　字体大小：12px

　　字体粗细：400；

　　颜色：# 333；

　　box-shadow: 2px 2px 3px 0 rgba(0，0，0，0.3)；

　　}。上下文菜单li {

　　边距：0；

　　填充：7px 16px

　　光标：指针；

　　}。李：悬停{

　　背景：# eee

　　}

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。