鼠标右键弹出菜单列表

    |     2022年9月9日   |   vuejs   |     0 条评论   |    1241

项目开发中实现多标签导航模块, 点击右键关闭所有标签功能。如下图所示

实现思路:

​ 1. 在多标签导航区域点击鼠标右键,触发右键事件contextmenu .

​ 2. 获取鼠标右键坐标x,y. 在当前位置弹出自定义关闭所有标签菜单.

​ 3. 点击关闭触发关闭标签事件, 点击其它区域关闭菜单。

​ 1,2步实现都无大问题,在实现第3步时关闭标签事件和关闭菜单事件出现事件冲突。后来用第三右键菜单库 vue-contextmenujs 解决问题.

具体使用记录如下

  1. ​ 安装:

    npm install vue-contextmenujsyarn add vue-contextmenujs
  1. 在vue项目main.js文件中引入集成

    // main.js
    import Contextmenu from 'vue-contextmenujs'
    Vue.use(Contextmen)
  2. 多标签导航区域绑定事件delAllTag

    <div
        class="tag-wrap"
        :class="tagList.length > 0 ? 'tags-view-container' : ''"
        @contextmenu.prevent.stop="delAllTag($event)"
      >
     methods: {
        delAllTag(event) {
            this.$contextmenu({
              x:event.offsetX,
              y:event.offsetY,
                items: [
                  {
                    label: '关闭所有标签',
                    divided: true,
                    minWidth: 0,
                    onClick: () => {
                      this.$store.dispatch('deleteAlltag')
                    }
                  },
                 
                ],
                event,
                customClass: 'mzss-cx', // 自定义菜单 class
                zIndex: 3, // 菜单样式 z-index
                minWidth: 160 // 主菜单最小宽度
              })
              return false
    ​
        },
      },
  3. 参数说明
    1662715488234
  4. 其它案例
    1662715543009

    1. 示例参考

转载请注明来源:鼠标右键弹出菜单列表
回复 取消