1、安装 vue-contextmenujs
npm install vue-contextmenujs
2、在main.js
文件中引入
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
3、在 .vue
文件中使用
<div
v-for="item in defaultList"
:key="item.devId"
@contextmenu.prevent="(event) => {onContextmenu(event, item)}">
<p>{
{item.name}}</p>
</div>
/** 鼠标右键 */
onContextmenu(event, data) {
this.$contextmenu({
items: [
{
icon: "el-icon-edit",
label: "修改板卡IP",
onClick: () => {
this.handleEdit(data);
}
},
],
event,
customClass: "class-a",
zIndex: 3,
minWidth: 100
});
return false;
},
handleEdit() {
console.log(data);
}