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

属性	描述	类型	可选值	默认值
items	菜单结构信息	MenuItemOptions[]	—	—
event	鼠标事件信息	Event	—	—
x	菜单显示X坐标, 存在event则失效	number	—	0
y	菜单显示Y坐标, 存在event则失效	number	—	0
zIndex	菜单样式z-index	number	—	2
customClass	自定义菜单class, 使用.custom-class .menu_item定位菜单项	string	—	—
minWidth	主菜单最小宽度	number	—	150

MenuItemOptions

属性	描述	类型	可选值	默认值
label	菜单项名称	string	—	—
icon	菜单项图标, 生成<i class="icon"></i>元素	string	—	—
disabled	是否禁用菜单项	boolean	—	false
hidden	是否隐藏菜单项	boolean	—	false
divided	是否显示分割线	boolean	—	false
customClass	自定义子菜单class, 使用.custom-class .menu_item定位菜单项	string	—	父级菜单customClass
minWidth	子菜单最小宽度	number	—	150
onClick	菜单项点击事件	Function()	—	—
children	子菜单结构信息	MenuItemOptions[]	—	—