服务器之家

服务器之家 > 正文

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

时间:2021-12-07 16:40     来源/作者:echo忘川

一、写原生方法

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;
}

参考链接

二、使用插件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

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部