AvueAvue
首页
  • 开发指南
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
  • DATA数据大屏
  • IOT数据组态
  • AI大模型平台
  • 购买
  • 查询
应用市场
公众号
赞助支持
  • 新用户专项优惠
  • 企业专项优惠
个人支付接口
首页
  • 开发指南
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
  • DATA数据大屏
  • IOT数据组态
  • AI大模型平台
  • 购买
  • 查询
应用市场
公众号
赞助支持
  • 新用户专项优惠
  • 企业专项优惠
个人支付接口
  • Article 文章
  • CountUp数字动画
  • Comment 评论
  • Card 卡片
  • Chat 客服聊天
  • Contextmenu 右键菜单
  • Clipboard 复制剪切板
  • DialogForm 弹窗表单
  • Draggable 拖拽
  • Export excel导出/导出
  • Flow 流程
  • ImagePreview 图片预览
  • Login 登录组件
  • License 授权书
  • Print打印
  • Screenshot 屏幕截图
  • Search 搜索
  • Sign 电子签名
  • TextEllipsis 超出文本省略
  • Tabs 选项卡
  • Tree 树型
  • Video 摄像头
  • Verify 验证码
  • Calendar 日历

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>
显示代码复制代码复制代码
Last Updated: 10/6/2022, 1:13:56 PM
Contributors: smallwei
Prev
Chat 客服聊天
Next
Clipboard 复制剪切板
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档

新产品通知

----------------------------

《AI大模型平台》

----------------------------

1. 大模型平台现已全面接入 DeepSeek R1 模型。

2. 提供自研流程编排引擎,可快速部署 LLM Portal,并一键托管私有模型,快速构建问答系统、知识库、智能助手等多种 LLM 应用场景。

3.「三位一体」智能架构提供灵活的 Chat、Agent、RAG(后续开发上线免费升级) 模式,满足不同业务需求,让智能化升级触手可及。

4. 系统演示:查看演示