ge-context-menu v1.0.0

ge-context-menu

transfer components by table

该组件适用用vue3.x + element-plus (因为组件内容有使用到plus的)

安装说明

npm: npm install ge-context-menu yarn: yarn add ge-context-menu

在局部组件上使用

import geContextMenu from 'ge-context-menu'

在main.js全局中配置

import geContextMenu from 'ge-context-menu' Vue.use(geContextMenu) 然后在其他.vue文件里面，直接使用组件 增加相关的属性配置即可

属性设置说明

menus: { text: "查看", command: "detail", ruleCode:'main-detail' }, { text: "编辑", command: "modify", visible:true, ruleCode:'main-update' }, { text: "删除", command: "del", visible:true, ruleCode:'main-del' } , menus定义为菜单数组，对象里面属性的text为菜单名，command为触发命令名称，ruleCode为通过后端返回的数据保存在后端返回的按钮权限:"main-detail","main-update",.... sessionStorage.setItem("ruleCodes", JSON.stringify(后端返回的按钮权限));界面按钮是否显示， visible为根据在菜单定义从哪个开始有几个，对应在界面组件属性的:visibles的值中返回true还是false来决定是否显示属性内容可以列表中其他属性状态来三目操作。

scope为当前列表的作用域

default为设置显示多少个，超出通过 ... 图标下拉展示 （默认展示两个）

@oper为对应菜单的操作方法 const clickRow = (command,scope) => { switch(command){ case 'del': console.log("del"); break; case 'modify': console.log("modify"); break; case 'detail': console.log("detail"); break; default: } }

效果图

效果图可在下载依赖后，在assets目录下查看