我要评论前言
最近公司的管理系统又要添加新功能，需求是为表格数据添加右键菜单，操作当前选中行的属性。
刚开始想的是直接控制dom树生成一个html编写的菜单，挂载到右键点击的位置。
但是我觉得vue这么强大，肯定有右键组件，肯定比自己写的好看。
不查不知道，一查居然发现vue原生支持右键菜单，当机立断，用原生右键菜单。
安装
npm install vue-contextmenujs
一、实现效果
老规矩，先来个成果图，有需要再往下看。
二、使用步骤
1、表格实现
我的表格用的是avue-crud，暂时不详细介绍这个表格组件了，总之就是功能很强大，比el-table强大的多。
下边的属性介绍一下：
page：表格的页码显示，包括currentpage、pagesize、total等等。data：表格数据option：表格属性配置v-loading：加载动画@row-contextmenu：对表格数据的右键操作@size-change：对每页展示多少条数据的改变操作@current-change：翻页操作@select：选中操作@select-all：全选操作
<avue-crud ref="crud" :page.sync="detailpage" :data="tabledata" :option="tableoption" v-loading="loading" @row-contextmenu="handlecontextmenu" @size-change="sizechange" @current-change="currentchange" @select="handleselect" @select-all="handleselectall"> </avue-crud>
这些操作可以参考avue官网，具体怎么设置先不细说了，主要介绍右键菜单。
和右键菜单对应的就是@row-contextmenu方法，监听了对表格数据的右键点击事件。
我们在这个方法里绑定生成菜单的函数，我这里起的名字是handlecontextmenu
2、生成右键菜单
表格做好了，右击事件也绑定好了，接下来就是生成右键菜单。
handlecontextmenu(item, index) {
this.$contextmenu.destroy();
this.$contextmenu({
items: [
{
label: "属性",
onclick: () => {
// 记录当前右键操作
store.commit("set_right_type", "viewresourcenature");
this.$refs.attrbox.visible = true;
},
},
{
label: "标签设置",
icon: "el-icon-discount",
disabled: !(current.editable),
onclick: () => {
// 记录当前右键操作
store.commit("set_right_type", "setpicturetag");
this.settag(item);
},
},
{
label: "电子图册",
divided: true,
onclick: () => {
// 记录当前右键操作
store.commit("set_right_type", "electronicatlas");
this.$refs.electronicbox.visible = true;
},
children: [
{
label: "截取可视化区域",
onclick: () => {
this.message = "截取可视化区域";
}
},
{ label: "截取全屏" }
]
},
{
label: "渠道名称设置",
onclick: () => {
// 记录当前右键操作
store.commit("set_right_type", "abilitynames");
this.$refs.abnbox.visible = true;
},
}
],
event,
customclass: "resource-context-menu",
zindex: 999,
minwidth: 200,
});
return false;
}
生成右键菜单要调用this.$contextmenu()方法。参数是一个对象：基本包含以下属性：
{
// 菜单内容
item：[],
// 自定义样式
customclass: "resource-context-menu",
// 层级
zindex: 999,
// 最小宽度
minwidth: 200,
}
从我的例子也能看出来，最重要的是item属性，配置的是右键菜单中的每一项。
item中可以设置：
- 菜单名称：label：“菜单名称”
- 菜单前置图标：icon：“el-icon-discount”
- 菜单底部分割线：divided：true
- 菜单点击事件：onclick: () => {}
- 子菜单：children：[]
每次生成新的右键菜单前，先把旧的销毁。
this.$contextmenu.destroy();
3、监听鼠标滚动事件，清除右键菜单
突然发现有这么个问题：当列表数据过多时，我们需要滚动表格去查看下面的数据，这时候右键菜单的位置就和表格的数据对不上了。
这时候需要加个鼠标滚动事件的监听，当鼠标滚轮事件发生时，清除右键菜单。
代码实现如下：
mounted() {
// 先把浏览器自带的右键功能屏蔽掉
this.$nexttick(() => {
// 禁止右键
document.oncontextmenu = new function("event.returnvalue=false");
});
// 监听页面滚动事件
window.addeventlistener('scroll', this.handlescroll, true)
},
beforedestroy() {
// 离开页面时，清除页面滚动事件
window.removeeventlistener('scroll', this.handlescroll, true)
this.$nexttick(() => {
// 放开对浏览器右键的禁止
document.oncontextmenu = new function();
});
},
methods: {
// 页面滚动时清除右键菜单，避免位置混淆
handlescroll () {
this.$contextmenu.destroy();
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论