vue-contextmenu 右键弹出菜单插件，新增加了无限子菜单功能。
简单的小插件，欢迎拷贝走，记得给个star！
// main.js
import Vue from 'vue';
import ContextMenu from '@/plugins/ContextMenu';
Vue.use(ContextMenu);<script>
import { ContextMenu, ContextMenuDirective } from '@/plugins/ContextMenu';
export default {
directives: {
// 引入指令式 指令式写法见下文
'v-contextmenu': ContextMenuDirective
},
methods: {
openMenu() {
// 引入函数式
ContextMenu({
event, // 传入鼠标事件
menu: [
{ icon: 'el-icon-view', name: this.$t('button.view'), action: 'view' },
{ icon: 'el-icon-edit', name: this.$t('button.edit'), action: 'edit' },
{ icon: 'el-icon-delete', name: this.$t('button.delete'), action: 'delete',
children: [
{
icon: 'el-icon-price-tag',
name: '新增1',
action: 'newMemoryTag',
},
{
icon: 'el-icon-price-tag',
name: '新增2',
action: 'newExpressionTag',
}
]
}
]
}).then(rs => {
switch (rs) {
case 'view':
this.viewFn();
break;
case 'edit':
this.editFn();
break;
case 'delete':
this.deleteFn();
break;
}
});
}
}
};
</script><template>
<div class="panel__wrap" v-contextmenu="menu">
some inner html or other ...
</div>
</template>
<script>
// 以下两种场景均以全局引入方式引入
export default {
methods: {
viewFn(event) {},
editFn(event) {},
deleteFn(event) {}
},
computed: {
menu () {
return [{
icon: 'el-icon-view',
name: this.$t('button.view'),
fn: this.viewFn
}, {
icon: 'el-icon-edit',
name: this.$t('button.edit'),
fn: this.editFn
}, {
icon: 'el-icon-delete',
name: this.$t('button.delete'),
fn: this.deleteFn
}]
}
}
};
</script><template>
<el-table @row-contextmenu="rowContextmenu">
some inner html or other ...
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
rowContextmenu(row, event) {
this.$ContextMenu({
event, // 传入鼠标事件
menu: [
{ icon: 'el-icon-view', name: this.$t('button.view'), action: 'view' },
{ icon: 'el-icon-edit', name: this.$t('button.edit'), action: 'edit' },
{ icon: 'el-icon-delete', name: this.$t('button.delete'), action: 'delete' }
]
}).then(rs => {
switch (rs) {
case 'view':
this.viewFn();
break;
case 'edit':
this.editFn();
break;
case 'delete':
this.deleteFn();
break;
}
});
}
}
};
</script><template>
<el-table @row-contextmenu="rowContextmenu">
some inner html or other ...
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
rowContextmenu(row, event) {
this.$ContextMenu({
event, // 传入鼠标事件
menu: [
{ icon: 'el-icon-view', name: this.$t('button.view'), fn: this.viewFn },
{ icon: 'el-icon-edit', name: this.$t('button.edit'), fn: this.editFn },
{ icon: 'el-icon-delete', name: this.$t('button.delete'), fn: this.deleteFn }
]
});
},
viewFn(event) {},
editFn(event) {},
deleteFn(event) {}
}
};
</script>import { ContextMenuClose } from '@/plugins/ContextMenu';
// 上下文...
ContextMenuClose(); // 调用关闭