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 }}

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

vue右键自定义菜单_一款小巧的开源右键菜单管理软件
要说右键管理软件,果核上面目前收集了几款,例如年久失修的右键管家. 虽然很多年没有更新了,但是软件的功能却正常,日常删除多余的右键菜单没问题. 另外,就是火绒家的右键管家,基本功能也够用不过嘛,今天 ...
win10恢复经典开始菜单_厌倦了默认的Win10开始菜单外观？这是自定义的方法
开始菜单具有高度的可定制性,在本文中,将向你展示调整其设置以使其在Windows 10上更具功能性和个性化的操作步骤. 在Windows 10上,"开始"菜单是必不可少的组件,因为 ...
vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
vue.js 常见面试题_使用Vue.js时应避免的常见错误
vue.js 常见面试题 Looking for a front-end framework to try out, I started with React and then tried Vue.j ...
vue 给取data值_一些Vue相关的面试题，帮助求职者提升竞争力
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来我就给大家分享一些Vue相关的面试题,帮助大家提升 ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
vue.js组件的练习_由Vue.js开发的电阻器颜色练习网站
vue.js组件的练习 ResisColor (ResisColor) ⚡ A resistor color practice website develop by Vue.js. ⚡电阻器颜色练习网 ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
java友盟自定义行为_友盟自定义事件常见问题
为什么使用自定义事件在一个规范的迭代流程中,每个功能的增加和后续的改进都需要用户操作数据的支持,而且运营重点的确立也需要大量的用户数据做支持,所以关键功能的埋点是有效的帮助团队分析用户习惯的方式. ...

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

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

最新文章

热门文章