vue2项目实现自定义右键菜单, 可添加图标、事件等

通常浏览器都会有自己的右键菜单，如下图的谷歌浏览器网页上的右键菜单：

下面介绍一下如何在vue的项目中实现自定义菜单，如下图所示 ：

1. 安装依赖包 

npm install vue-contextmenujs

2. 在main.js中引用

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

3. 在需要实现自定义右键的元素上加上 @contextmenu.prevent="onContextmenu" 

4. methods中添加方法

// 鼠标右键事件
onContextmenu(event) {
    this.$contextmenu({
        items: this.contextMenuData,
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
    });
    return false;
},

5.  contextMenuData 的数据如下 

 data() {
    return {
      contextMenuData: [
        {
          label: "编辑",
          icon: "iconfont el-icon-edit-outline",
          onClick: () => {
            this.EiditRowFun();
          },
        },
        {
          label: "上方插入一行",
          icon: "icon el-icon-top",
          onClick: () => {
            this.TopAddRowFun();
          },
        },
        {
          label: "下方插入一行",
          icon: "icon el-icon-bottom",
          onClick: () => {
            this.BottomAddRowFun();
          },
        },
        {
          label: "末尾增加一行",
          icon: "icon el-icon-plus",
          //divided: true,
          onClick: () => {
            this.AddRowFun();
          },
        },
        // {
        //   label: "删除一行",
        //   icon: "icon el-icon-delete",
        //   divided: true,
        //   onClick: () => {
        //     this.DeleteRowFun();
        //   },
        // },
      ],
    };
  },

  EiditRowFun() {
      debounce(() => {
        this.$refs.EditDialogCptRef.openDialog(
          this.GetActiveItemQueryCodeTableData,
          "编辑"
        );
      }, 100);
    },
    TopAddRowFun() {
      debounce(() => {
        this.$refs.EditDialogCptRef.openDialog(
          this.GetActiveItemQueryCodeTableData,
          "上方插入一行"
        );
        // let NowIndex = this.GetActiveItemQueryCodeTableData.List.findIndex(
        //   (item, index) =>
        //     item.Id == this?.GetActiveItemQueryCodeTableData?.CruentActiveRow.Id
        // );
        // console.log(`TopAddRowFun---NowIndex`, NowIndex);
        // let Obj = {
        //   GroupNo: "",
        //   GroupName: "",
        //   CodeName: "",
        //   Code: "",
        //   Relation: "",
        //   Id: GenNonDuplicateID(13),
        // };
        // this.GetActiveItemQueryCodeTableData.List.splice(
        //   NowIndex == 0 ? 0 : NowIndex,
        //   0,
        //   Obj
        // );
      }, 100);
    },
    BottomAddRowFun() {
      debounce(() => {
        this.$refs.EditDialogCptRef.openDialog(
          this.GetActiveItemQueryCodeTableData,
          "下方插入一行"
        );
        // let NowIndex = this.GetActiveItemQueryCodeTableData.List.findIndex(
        //   (item, index) =>
        //     item.Id == this?.GetActiveItemQueryCodeTableData?.CruentActiveRow.Id
        // );
        // console.log(`BottomAddRowFun---NowIndex`, NowIndex);
        // let Obj = {
        //   GroupNo: "",
        //   GroupName: "",
        //   CodeName: "",
        //   Code: "",
        //   Relation: "",
        //   Id: GenNonDuplicateID(13),
        // };
        // this.GetActiveItemQueryCodeTableData.List.splice(NowIndex + 1, 0, Obj);
      }, 100);
    },
    AddRowFun() {
      debounce(() => {
        this.$refs.EditDialogCptRef.openDialog(
          this.GetActiveItemQueryCodeTableData,
          "末尾插入一行"
        );
        // let Obj = {
        //   GroupNo: "",
        //   GroupName: "",
        //   CodeName: "",
        //   Code: "",
        //   Relation: "",
        //   Id: GenNonDuplicateID(13),
        // };
        // this.$set(
        //   this.GetActiveItemQueryCodeTableData.List,
        //   this.GetActiveItemQueryCodeTableData.List.length,
        //   Obj
        // );
        // this.TableScrollHeighFun();
      }, 100);
    },
    DeleteRowFun() {
      debounce(() => {
        let NowIndex = this.GetActiveItemQueryCodeTableData.List.findIndex(
          (item, index) =>
            item.Id == this?.GetActiveItemQueryCodeTableData?.CruentActiveRow.Id
        );
        console.log(`BottomAddRowFun---NowIndex`, NowIndex);
        this.$delete(this.GetActiveItemQueryCodeTableData.List, NowIndex);
        this.SaveCodeTableData();
      }, 100);
    },
    TableScrollHeighFun() {
      this.$nextTick(() => {
        if (this.$refs.filterTable) {
          this.$refs.filterTable.bodyWrapper.scrollTop =
            this.$refs.filterTable.bodyWrapper.scrollHeight;
        }
      });
    },

 

contextMenuData中，label是文字，onClick是绑定的点击事件，icon是图标，我这里用的阿里的iconfont，如果想使用ElementUI的图标，可以把icon的值设置为 icon el-icon-edit。第一个参数必填，固定为icon，第二个参数就是ElementUI图标库里对应的类名。

icon: 'icon el-icon-edit',

 

 原文链接：vue2项目实现自定义右键菜单, 可添加图标、事件等_codemirror中鼠标右键触发事件-CSDN博客