vue右键点击菜单,vue左侧菜单组件

　　本文主要详细介绍vue中的自定义右键菜单插件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

前言：

　　作为一个刚入门的搬砖工，我写博客只是为了能够记录一些因为业务原因用过的插件，以便以后更好的使用和改造。

　　本文分享vue中自定义右键菜单插件的具体代码，供大家参考。具体内容如下

演示

用法

　　通过npm安装插件

　　npm i vue-context -S

　　在main.js中介绍和注册

　　从“Vue”导入Vue；

　　从“vue-context”导入VueContext

　　新Vue({

　　组件：{

　　VueContext

　　},

　　在页面内使用

　　差异

　　p @ context menu . prevent= $ refs . menu . open

　　右击我

　　/p

　　/div

　　使用@ context menu . prevent= $ refs . menu . open 右键绑定要绑定的元素。同时，相关参数可以按如下方式传入：

　　span @ context menu . prevent= $ refs . menu . open($ event，{level: L0 ，or_gid:1，parentId:3})

　　零件菜单栏

　　vue-上下文引用=菜单

　　li @click.prevent=""/li

　　/vue-上下文

　　菜单栏主要是ulli结构项目，可以自己设置样式。

　　同时vue-context还具有有多个属性

　　closeOnClick的默认值为true。当它设置为false时，鼠标单击菜单栏不会自动关闭关闭滚动。当设置为false时，鼠标点击菜单栏不会自动关闭vue-context ref=menu

　　:点击关闭= closeOnClick

　　:close-on-scroll=closeOnScroll

　　:懒=懒

　　:role=role

　　:tag=tag

　　:项目选择器=项目选择器

　　里

　　a class=自定义项目类选项1/a

　　/李

　　里

　　a class=自定义项目类选项2/a

　　/李

　　/vue-上下文

　　//数据中的数据

　　data () {

　　返回{

　　//当设置为true时，单击时上下文菜单将关闭

　　closeOnClick:没错，

　　//当设置为true时，上下文菜单将在窗口滚动时关闭

　　closeOnScroll:没错，

　　//如果为false，上下文菜单将通过v-show显示，并将始终显示在DOM中

　　懒：假，

　　//菜单上的“role”属性。建议保留为“菜单”

　　角色：“菜单”，

　　//菜单的根html标记。建议保持为“ul”

　　标签:“ul”，

　　//这是组件能够找到每个菜单项的方式。如果使用非推荐的标记，则非常有用

　　itemSelector: [。自定义项目分类]

　　};

　　}

　　还有很多具体的相关内容，因为项目比较急，业务需求满足的时候没有进一步研究。请在这里发布官方链接。

　　官方链接

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。