VUE右键菜单 vue-contextmenujs的使用

效果： 

文档：vue-contextmenujs - npm

1、安装

npm install vue-contextmenujs || yarn add vue-contextmenujs

2、使用

在main.js文件中使用

1.  
   import Contextmenu from "vue-contextmenujs"
2.  
   Vue.use(Contextmenu);

1.  
   // 在组件中调用显示菜单
2.  
   // this.$contextmenu(options:MenuOptions);
3.  
   // 鼠标点击或滚轮自动销毁, 也可手动销毁
4.  
   // this.$contextmenu.destroy();
5.  
    
6.  
   // 去除浏览器默认菜单
7.  
   // event.preventDefault();

3、示列 

1.  
   <div class="right-content" id="textArea">
2.  
   <div class="file-view" v-html="lightStr" @contextmenu.prevent="onContextmenu">
3.  
   </div>
4.  
   </div>

1.  
   onContextmenu(event) {
2.  
   console.log("配置右击菜单")
3.  
   let text = window.getSelection().toString()
4.  
   if (!text) {
5.  
   return false
6.  
   }
7.  
   this.tagform.tag = text;
8.  
   this.$contextmenu({
9.  
   items: [
10.  
    {
11.  
    icon: "el-icon-circle-plus-outline",
12.  
    label: "添加标签",
13.  
    onClick: () => {
14.  
    this.addTagVisible = true;
15.  
    }
16.  
    },
17.  
    ],
18.  
    event,
19.  
    customClass: "class-a",
20.  
    zIndex: 3,
21.  
    minWidth: 100
22.  
    });
23.  
    return false;
24.  
    },

参数说明

MenuOptions

MenuItemOptions

这篇好文章是转载于：学新通技术网