vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单

前言

浏览器里右键时会有一个默认的菜单，在我的开源项目中正好有自定义右键菜单的需求，在npm库找了下与之相关的包，发现都是以组件形式实现的，感觉那种做法太过繁琐。

于是，我就想着能不能像vue的内置指令那样，绑定到元素上，在这个元素上右键就能出现右键菜单，这样做就方便很多了。

看了下vue的自定义指令文档后，经过一番折腾，终于实现我的这个想法，本文就跟大家分享下我的实现思路以及过程，欢迎各位感兴趣的开发者阅读本文。

实现思路

Vue中有很多内置指令，例如：v-if、v-for、v-model，它除了这些内置指令外，还允许我们开发者自己注册指令，来实现我们想实现的效果，对Vue自定义指令不熟悉的开发者可以先看一下文档：自定义指令。

接下来，就跟大家讲一下我的实现思路：

布局右键菜单，编写样式

将右键菜单需要的用到的数据在vuex中进行定义

全局注册一个指令，命名为rightClick

拦截被绑定元素的oncontextmenu事件，对组件传过来的值进行处理

更新vuex里的右键菜单数据，触发右键菜单显示

实现过程

接下来，就跟大家分享下我的实现过程。

布局右键样式

我们先来看看这个组件需要哪些数据才能让其显示在鼠标所点的位置。

它的显隐状态，即：元素css的display属性

它的位置，即：元素css的left、top属性

它的文本数据，即：右键菜单要展示的内容，通过v-for来渲染

它的事件处理函数，即：右键菜单中选项点击时，要进行的事件处理

我们在项目中找一个公用组件，确保这个组件会被渲染，在组件的template中加入下述代码。

id="rightMenuDom"

class="right-menu"

:style="{

display: rightMenuStatus,

top: rightMenuTop,

left: rightMenuLeft

}"

>

• v-for="item in rightMenuList"

  :key="item.id"

  v-show="item.id <= 3"

  @click="item.handler"

  >{{ item.text }}

• v-for="item in rightMenuList"

  :key="item.id"

  v-show="item.id > 3"

  @click="item.handler"

  >{{ item.text }}