VUE项目中使用【vue-contextmenujs】自定义右键菜单

最新推荐文章于 2024-08-16 08:20:57 发布

zlting~

最新推荐文章于 2024-08-16 08:20:57 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sunshineTing2/article/details/128805843

版权

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);
}