效果: 

文档: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则失效number0
y菜单显示Y坐标, 存在event则失效number0
zIndex菜单样式z-indexnumber2
customClass自定义菜单class, 使用.custom-class .menu_item定位菜单项string
minWidth主菜单最小宽度number150

MenuItemOptions

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

前往低代码交流专区

更多推荐