使用前提

1.安装rview-c
2.保证rview-c版本在1.1.81(包含)以上

组件展示

说明	图片展示	说明	图片展示
主菜单右击		子菜单右击

参数

方法

使用示例

<style lang="less">
</style>
<template>
  <div>
    <MenuRightClick1
      ref="menuRightClick1"
      :menuList="menuList"
      :smallMenuList="smallMenuList"
      @handle-selectData="selectData"
      @handle-contextMenu="contextMenu"
      @handle-handleTagsOption="handleTagsOption"
    ></MenuRightClick1>
  </div>
</template>
<script>
export default {
  name: "menuRightClick1",
  data() {
    return {
      menuList: [//菜单列表
        {
          subMenu: {
            "inspectionName": "主体结构检查",
            "sort": "",
            "types": "1",
            "tenantId": 1,
            "id": "2cb2ae79-0145-4970-9560-eebd8157ed94"

          },
          menuItems: [
            {
              "inspectionName": "防护设备",
              "sort": "",
              "types": "0",
              "tenantId": 1,
              "id": "e2ab5294-ed82-4e3d-b63a-a524b038cc8f"
            }
          ]
        },
        {
          subMenu: {
            "inspectionName": "设备设施检查",
            "sort": "",
            "types": "1",
            "tenantId": 1,
            "id": "2cb2ae79-0145-4970-9560-eebd8157ed94"

          },
          menuItems: [
            {
              "inspectionName": "主体结构",
              "sort": "",
              "types": "1",
              "tenantId": 1,
              "id": "2cb2ae79-0145-4970-9560-eebd8157ed94"
            }, {
              "inspectionName": "设备故障",
              "sort": "",
              "types": "1",
              "tenantId": 1,
              "id": "6f6810b1-e436-4a08-acd4-962cb1091db3"
            }, {
              "inspectionName": "漏水",
              "sort": "",
              "types": "1",
              "tenantId": 1,
              "id": "8a854035-d544-425e-9a4e-0cb4c223204f"
            }]
        }
      ],
      smallMenuList: {
        others: "修改名称",
        all: "删除问题"
      },//默认右击出现的菜单
    }
  },
  methods: {
    /**
     * 点击左侧菜单
     */
    selectData(item){
      console.log(item.inspectionName);
    },
    /**
     * 点击右击左侧菜单
     */
    contextMenu(param){
      if (param.item == 1) {
        this.smallMenuList = {
          add: "新增分类"
        };
      } else if (param.item == 2) {
        this.smallMenuList = {
          edit: "修改名称",
          detail: "删除问题",
          chanage: "转移分类"
        };
      }
      this.$refs.menuRightClick1.configdata = param.item;
      this.$refs.menuRightClick1.visible = true;
      const offsetLeft = this.$el.getBoundingClientRect().left;
      this.$refs.menuRightClick1.contextMenuLeft = param.e.clientX - offsetLeft + 10;
      this.$refs.menuRightClick1.contextMenuTop = param.e.clientY - 10;
    },
    /**
     * 点击右击出现菜单
     */
    handleTagsOption(item){
      debugger
      console.log(item);
    }
  }
}
</script>