VUE右键菜单 vue-contextmenujs的使用

效果： 

文档：vue-contextmenujs - npm

1、安装

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

2、使用

在main.js文件中使用

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

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

3、示列 

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

  onContextmenu(event) {
      console.log("配置右击菜单")
      let text = window.getSelection().toString()
      if (!text) {
        return false
      }
      this.tagform.tag = text;
      this.$contextmenu({
        items: [
          {
            icon: "el-icon-circle-plus-outline",
            label: "添加标签",
            onClick: () => {
              this.addTagVisible = true;
            }
          },
        ],
        event,
        customClass: "class-a",
        zIndex: 3,
        minWidth: 100
      });
      return false;
    },

参数说明

MenuOptions

MenuItemOptions