高效实现需求,避免重复造轮子,今天给大家分享的是,如何在最短的时间内实现右键菜单,方法也很简单,一个插件就可以搞定,话不多说,上效果图:
1. 效果图:
2. 安装:
npm install vue-contextmenujs
或
yarn add vue-contextmenujs
3. 引入:
在main.js中引入
import Contextmenu from “vue-contextmenujs”
Vue.use(Contextmenu);
4. 代码实现:
4.1 在需要实现自定义右键的元素上加上 @contextmenu.prevent=“onContextmenu”:
<div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu">
<div>右键</div>
</div>
4.2 在methods中添加方法:
// 鼠标右键事件
onContextmenu(event) {
this.$contextmenu({
items: this.contextMenuData,
event, // 鼠标事件信息
customClass: 'custom-class', // 自定义菜单 class
zIndex: 3, // 菜单样式 z-index
minWidth: 230 // 主菜单最小宽度
});
return false;
},
4.3 contextMenuData 的数据如下:
data() {
return {
contextMenuData: [
{
label: "置顶会话",
// 以element-ui图标为例实现右键菜单,图标会为被渲染为<i class="icon"></i>
icon: "icon el-icon-top",
onClick: () => {
this.TopAddRowFun();
},
},
{
label: "删除会话",
icon: "icon el-icon-delete",
divided: true,
onClick: () => {
this.DeleteRowFun();
},
},
],
};
},
contextMenuData 数据中,label 是文字,onClick 是绑定的点击事件,icon 是图标,我这里用的element-ui 的图标,可以把icon的值设置为 icon el-icon-edit。第一个参数必填,固定为icon,第二个参数就是element-ui 图标库里对应的类名,divided 是分割线,默认是 false。