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,hide:handleHide}">
      {{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 setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({})
const list = ref([{ name: '张三' }, { name: '李四' }, { name: '王五' }])

onMounted(() => {
  setTimeout(() => {
    list.value[0].name = 'small'
  }, 1000)
})

const handleHide = (row, e) => {
  ElMessage.success('隐藏回调信息' + JSON.stringify(row))
}

const handleEvent = (row, done, e) => {
  form.value = row
  done()
  ElMessage.success('打开回调信息' + JSON.stringify(row))
}

const handleClick1 = () => {
  ElMessage.success('菜单1' + JSON.stringify(form.value))
}

const handleClick2 = () => {
  ElMessage.success('菜单2' + JSON.stringify(form.value))
}

const handleClick3 = () => {
  ElMessage.success('菜单3' + JSON.stringify(form.value))
}

const handleClick4 = () => {
  ElMessage.success('菜单4' + JSON.stringify(form.value))
}
</script>

显示代码复制代码复制代码