个人中心
gpt4 book ai didi

vue添加自定义右键菜单的完整实例

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue添加自定义右键菜单的完整实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、写原生方法

vue添加自定义右键菜单的完整实例

1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下:

?
1
2
3
4
5
6
7
8
          < li
  v-for = "item in resourceList"
  :key = "item.id"
  @ click = "handleClickFolder(item)"
  @ contextmenu.prevent = "openMenu($event,item)"
>
...
</ li >

2.在页面编写右键菜单内容

?
1
2
3
4
5
6
7
8
<ul v-show= "visible" :style= "{left:left+'px',top:top+'px'}" class= "contextmenu" >
   <!-- <li v- if = "rightClickItem.fileType==99" @click= "handleClickFolder(rightClickItem)" >打开</li>
   <li @click= "handleDelete(rightClickItem)" >删除</li>
   <li @click= "handleDownloadFile(rightClickItem)" v- if = "rightClickItem.fileType!=99" >下载</li>
   <li @click= "handlePreviewFile(rightClickItem)" v- if = "rightClickItem.fileType!=99" >预览</li>
   <li @click= "handleUpdate(rightClickItem)" >编辑</li> -->
   <li>内容</li>
  </ul>

3.在data()中定义需要的变量属性 。

?
1
2
3
4
5
6
7
data() {
     return {
             visible: false ,
             top: 0,
             left: 0
     }
}

4.观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法 。

?
1
2
3
4
5
6
7
8
9
watch: {
visible(value) {
  if (value) {
  document.body.addEventListener( 'click' , this .closeMenu)
  } else {
  document.body.removeEventListener( 'click' , this .closeMenu)
  }
}
}

5.在method中定义打开右键菜单和关闭右键菜单的两个方法 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
openMenu(e, item) {
  this .rightClickItem = item;
 
  var x = e.pageX;
  var y = e.pageY;
 
  this .top = y;
  this .left = x;
 
  this .visible = true ;
},
closeMenu() {
  this .visible = false ;
}

6.在style中写右键菜单的样式 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.contextmenu {
  margin : 0 ;
  background : #fff ;
  z-index : 3000 ;
  position : absolute ;
  list-style-type : none ;
  padding : 5px 0 ;
  border-radius: 4px ;
  font-size : 12px ;
  font-weight : 400 ;
  color : #333 ;
  box-shadow: 2px 2px 3px 0 rgba( 0 , 0 , 0 , 0.3 );
}
 
.contextmenu li {
  margin : 0 ;
  padding : 7px 16px ;
  cursor : pointer ;
}
 
.contextmenu li:hover {
  background : #eee ;
}

参考链接 。

2、使用插件vue-context-menu

demo地址 。

github地址 。

安装:

?
1
npm install vue-contextmenu --save

引用:

?
1
2
import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

使用:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
<div id= "app" @contextmenu= "showMenu"
  style= "width: 100px;height: 100px;margin-top: 20px;background: red;" >
  <vue-context-menu :contextMenuData= "contextMenuData"
   @savedata= "savedata"
   @newdata= "newdata" ></vue-context-menu>
</div>
</template>
<script>
export default {
  name: 'app' ,
  data () {
  return {
     // contextmenu data (菜单数据)
   contextMenuData: {
   // the contextmenu name(@1.4.1 updated)
   menuName: 'demo' ,
   // The coordinates of the display(菜单显示的位置)
   axis: {
    x: null ,
    y: null
   },
   // Menu options (菜单选项)
   menulists: [{
    fnHandler: 'savedata' , // Binding events(绑定事件)
    icoName: 'fa fa-home fa-fw' , // icon (icon图标 )
    btnName: 'Save' // The name of the menu option (菜单名称)
   }, {
    fnHandler: 'newdata' ,
    icoName: 'fa fa-home fa-fw' ,
    btnName: 'New'
   }]
   }
  }
  },
  methods: {
  showMenu () {
   event.preventDefault()
   var x = event.clientX
   var y = event.clientY
   // Get the current location
   this .contextMenuData.axis = {
   x, y
   }
  },
  savedata () {
   alert(1)
  },
  newdata () {
   console.log( 'newdata!' )
  }
  }
}
</script>

tip:有说不兼容ie的，具体没有测试 。

到此这篇关于vue添加自定义右键菜单的文章就介绍到这了,更多相关vue添加自定义右键菜单内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/qq_38143787/article/details/107002061 。

最后此篇关于vue添加自定义右键菜单的完整实例的文章就讲到这里了,如果你想了解更多关于vue添加自定义右键菜单的完整实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： Laravel学习教程之model validation的使用示例
文章推荐： Laravel5.1框架自带权限控制系统 ACL用法分析
文章推荐： 布隆过滤器(bloom filter)及php和redis实现布隆过滤器的方法
文章推荐： laravel实现批量更新多条记录的方法示例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com