vue中自定义右键菜单插件
短信预约 -IT技能 免费直播动态提醒
前言：
作为一个刚刚入门前端的搬砖工作者，写博客只是为了能够记录自己因为业务使用过的一些插件，为了后续更好的使用和改造
本文分享了vue中自定义右键菜单插件的具体代码，供大家参考，具体内容如下
演示
用法
通过npm安装插件
npm i vue-context -S在main.js中引入并注册
import Vue from 'vue';
import VueContext from 'vue-context';
new Vue({
components: {
VueContext
},在页面内使用
<div>
<p @contextmenu.prevent="$refs.menu.open">
Right click on me
</p>
</div>在需要绑定的元素使用@contextmenu.prevent="$refs.menu.open"进行右键绑定，在绑定的同时还可以传入相关的参数 如下：
<span @contextmenu.prevent="$refs.menu.open($event, {level: 'L0', or_gid:1, parentId:3})">菜单栏部分
<vue-context ref="menu">
<li @click.prevent=“”></li>
</vue-context>菜单栏主要是ul>li结构 项目中可以自己来设置样式
同时vue-context还具有有多个属性
- closeOnClick 默认值为true 设置成false时鼠标点击菜单栏将不会自动关闭
- closeOnScroll 默认值为true 设置成false时鼠标点击菜单栏将不会自动关闭
<vue-context ref="menu"
:close-on-click="closeOnClick"
:close-on-scroll="closeOnScroll"
:lazy="lazy"
:role="role"
:tag="tag"
:item-selector="itemSelector"
>
<li>
<a class="custom-item-class">Option 1</a>
</li>
<li>
<a class="custom-item-class">Option 2</a>
</li>
</vue-context>
// data里面的数据
data () {
return {
// when set to true, the context menu will close when clicked on
closeOnClick: true,
// when set to true, the context menu will close when the window is scrolled
closeOnScroll: true,
// When false, the context menu is shown via v-show and will always be present in the DOM
lazy: false,
// The `role` attribute on the menu. Recommended to stay as `menu`
role: 'menu',
// The root html tag of the menu. Recommended to stay as `ul`
tag: 'ul',
// This is how the component is able to find each menu item. Useful if you use non-recommended markup
itemSelector: ['.custom-item-class']
};
}具体的相关内容还有很多，因为项目赶的比较急，达到了业务需求就没有继续深究，在此贴一下官方链接
官方 链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
