vue中自定义右键菜单插件

下面我就来详细讲解一下 Vue 中如何自定义右键菜单插件。

步骤一：安装依赖

首先需要安装如下两个依赖：

npm install -S vue-context-menu
npm install -S font-awesome

其中，vue-context-menu 是自定义右键菜单插件的基础依赖，而 font-awesome 则是为了演示菜单项中的图标效果。

步骤二：创建菜单组件

在 Vue 项目中新建一个文件，命名为 ContextMenu.vue，用来作为自定义右键菜单插件的组件。

<template>
  <div class="context-menu" :style="{left: position.left + 'px', top: position.top + 'px'}">
    <ul>
      <li v-for="(menuItem, index) in menuItems" :key="index" @click.stop="menuItemClick(menuItem)">
        <i v-if="menuItem.icon" :class="menuItem.icon"></i>
        {{menuItem.text}}
      </li>
    </ul>
  </div>
</template>

上述代码中，我们使用了一个 div 元素，它的样式通过动态绑定 left 和 top 两个属性来控制菜单的位置。另外，我们还使用了一个 ul 元素来展示菜单项，通过使用 v-for 指令对菜单项进行循环遍历。

步骤三：定义插件

通过定义一个自定义插件将菜单组件集成到 Vue 中，在 Vue 中使用时，就可以方便的打开自定义右键菜单。

import ContextMenu from './components/ContextMenu.vue'

export default {
  install(Vue) {
    Vue.directive('contextmenu', {
      bind(el, binding) {
        const menuItems = binding.value.menuItems || []
        const $menu = new Vue({
          el: document.createElement('div'),
          data() {
            return {
              menuItems,
              position: {
                left: 0,
                top: 0
              }
            }
          },
          methods: {
            menuItemClick(menuItem) {
              menuItem.click && menuItem.click()
              $menu.$destroy()
            }
          },
          mounted() {
            document.body.appendChild(this.$el)
          },
          render(h) {
            return h(ContextMenu, {
              props: {
                menuItems: this.menuItems,
                position: this.position
              }
            })
          }
        })

        el.addEventListener('contextmenu', e => {
          e.preventDefault()

          // 更新菜单项
          $menu.menuItems = binding.value.menuItems

          // 更新位置
          $menu.position = {
            left: e.clientX,
            top: e.clientY
          }
        })

        el.$contextmenu = $menu
      },
      unbind(el) {
        el.removeEventListener('contextmenu', () => {})
        el.$contextmenu.$destroy()
      }
    })
  }
}

通过上面的代码，我们就完成了一个 Vue 自定义右键菜单插件，其中 directive 中包含了 bind 和 unbind 两个生命周期钩子。我们在 bind 中将菜单项渲染到动态创建的 div 元素中，并控制菜单项的展示位置；在 unbind 中则是使用了 $destroy 方法来回收自定义插件。

步骤四：使用插件

在 Vue 中使用自定义右键菜单插件是十分简单的，只需要在需要使用的组件上使用 v-contextmenu 指令即可。

<template>
  <div v-contextmenu="{menuItems: contextMenuItems}">
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      contextMenuItems: [
        {text: '菜单项一', click: this.action1},
        {text: '菜单项二', click: this.action2, icon: 'fa fa-star'}
      ]
    }
  },
  methods: {
    action1() {
      console.log('执行动作一')
    },
    action2() {
      console.log('执行动作二')
    }
  }
}
</script>

上述代码中，我们使用 v-contextmenu 指令，将自定义的上下文菜单应用到组件上，并通过 menuItems 属性来设置菜单项的内容和点击事件。

示例一：在 table 组件中应用

在 table 组件中使用自定义右键菜单插件是十分有用的，可以为用户提供更直观、更高效的表格操作方式。

<template>
  <table v-contextmenu="{menuItems: tableMenuItems}">
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {id: 1, name: '张三', age: 18},
        {id: 2, name: '李四', age: 20},
        {id: 3, name: '王五', age: 22}
      ],
      tableMenuItems: [
        {text: '新增', click: this.insert},
        {text: '删除', click: this.delete, icon: 'fa fa-trash'}
      ]
    }
  },
  methods: {
    insert() {
      console.log('进行插入操作')
    },
    delete() {
      console.log('进行删除操作')
    }
  }
}
</script>

上述代码中，我们在 table 组件中使用了自定义右键菜单插件，并为具体的菜单项添加了事件响应函数，实现了对表格的操作。

示例二：在地图组件中应用

自定义右键菜单插件不仅可以应用在表格等数据组件中，也可以用来实现更加酷炫的效果。

<template>
  <div>
    <div class="map" v-contextmenu="{menuItems: mapContextMenuItems}" @mousemove="handleMouseMove">
      <div class="user" :style="{left: userPosition.x + 'px', top: userPosition.y + 'px'}"></div>
    </div>
    <div class="tips">鼠标在地图上移动，右键弹出菜单</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userPosition: {x: 0, y: 0},
      mapContextMenuItems: [
        {text: '设置起点', click: this.setStart},
        {text: '设置终点', click: this.setEnd},
        {text: '测量距离', click: this.measure, icon: 'fa fa-arrows-h'}
      ]
    }
  },
  methods: {
    setStart() {
      console.log('设置起点')
    },
    setEnd() {
      console.log('设置终点')
    },
    measure() {
      console.log('测量距离')
    },
    handleMouseMove(e) {
      this.userPosition = {x: e.pageX, y: e.pageY}
    }
  }
}
</script>

上述代码中，我们实现了一个地图组件，并使用了自定义右键菜单插件，其中菜单项为设置地图起点、设置地图终点和测量距离，菜单项的响应函数以及地图用户位置的更新都是通过鼠标移动事件来实现的。

通过上述两个示例，我们可以看到如何应用自定义右键菜单插件，可以在各种场景中起到非常重要的作用。