首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2实现自定义右键菜单,可添加图标事件

vue2项目实现自定义右键菜单,可添加图标、事件等方式

2024-04-26 09:16:05 作者：程序猿小野

这篇文章主要介绍了vue2项目实现自定义右键菜单,可添加图标、事件等方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

通常浏览器都会有自己的右键菜单

如下图的谷歌浏览器网页上的右键菜单：

介绍一下如何在vue的项目中实现自定义菜单

如下图所示：

1. 安装依赖包

npm install vue-contextmenujs

2. 在main.js中引用

import Contextmenu from 'vue-contextmenujs';
Vue.use(Contextmenu);

3. 在需要实现自定义右键的元素上

加上 @contextmenu.prevent="onContextmenu"

<div class="CodeMirror-Contain" @contextmenu.prevent="onContextmenu">
    <textarea ref="codeMirror"></textarea>
</div>

4. methods中添加方法

// 鼠标右键事件
onContextmenu(event) {
    this.$contextmenu({
        items: this.contextMenuData,
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
    });
    return false;
},

5. contextMenuData的数据

如下：

this.contextMenuData = [
    {
        label: '运行',
        icon: 'iconfont icon-zhihang',
        onClick: () => {
            this.onRunCode();
        }
    },
    {
        label: '运行',
        icon: 'iconfont icon-sql_exec_new',
        onClick: () => {
            this.onRunCodeNewTab();
        }
    },
    {
        label: '收藏',
        icon: 'iconfont icon-baocun1',
        divided: true,
        onClick: () => {
            this.onCommitOrder();
        }
    },
    {
        label: '格式化',
        icon: 'iconfont icon-geshihua1',
        onClick: () => {
            this.onFormatSQL();
        }
    }
];

contextMenuData中，label是文字，onClick是绑定的点击事件，icon是图标

我这里用的阿里的iconfont，如果想使用ElementUI的图标，可以把icon的值设置为 icon el-icon-edit

第一个参数必填，固定为icon
第二个参数就是ElementUI图标库里对应的类名

icon: 'icon el-icon-edit',

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。