# Contextmenu 右键菜单
- 张三
- 李四
- 王五
- 菜单1
- 菜单2
- 菜单3
- 菜单4
- 菜单5
利用v-contextmenu
指令传入相关参数即可
<template>
<ul>
<li v-for="(item,index) in list"
:key="index"
class="el-dropdown-menu__item"
v-contextmenu="{id:'dialog',event:handleEvent,value:item}">
{{item.name}}
</li>
</ul>
<ul class="el-dropdown-menu el-popper"
id="dialog"
style="display:none">
<li class="el-dropdown-menu__item"
@click="handleClick1">
<i class="el-icon-eleme"></i>菜单1
</li>
<li class="el-dropdown-menu__item"
@click="handleClick2">
<i class="el-icon-user"></i>菜单2
</li>
<li class="el-dropdown-menu__item"
@click="handleClick3">
<i class="el-icon-goods"></i>菜单3
</li>
<li class="el-dropdown-menu__item el-dropdown-menu__item--divided"
@click="handleClick4">
<i class="el-icon-circle-check"></i>菜单4
</li>
<li class="el-dropdown-menu__item"
@click="handleClick4">
菜单5
</li>
</ul>
</template>
<script>
export default {
data () {
return {
form: {},
list: [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
}
},
created () {
setTimeout(() => {
this.list[0].name = 'small'
}, 1000)
},
methods: {
handleEvent (row, done) {
this.form = row;
done();
this.$message.success('回调信息' + JSON.stringify(row))
},
handleClick1 () {
this.$message.success('菜单1' + JSON.stringify(this.form))
},
handleClick2 () {
this.$message.success('菜单2' + JSON.stringify(this.form))
},
handleClick3 () {
this.$message.success('菜单3' + JSON.stringify(this.form))
},
handleClick4 () {
this.$message.success('菜单4' + JSON.stringify(this.form))
},
}
}
</script>
显示代码复制代码复制代码