vue 数组右键菜单获取当前节点数据

最新推荐文章于 2024-09-14 08:23:21 发布

深圳程序员打工崽

最新推荐文章于 2024-09-14 08:23:21 发布

阅读量1.1k

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_39246975/article/details/125167761

版权

VUE 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue项目中实现右键菜单功能。通过引入vue-node-context-menu库，可以在遍历数据或页面上创建右键上下文菜单。具体步骤包括npm安装，main.js导入，组件中使用v-node-context-menu指令，并定义数据和方法来处理菜单项的点击事件。每个菜单项包含文本、图标和回调函数，点击时会触发回调，传入当前节点数据和菜单对象。

摘要由CSDN通过智能技术生成

如果遇到需要在数据遍历或者页面上使用右键菜单的时候，可以考虑以下方案：
老规矩先看图：
在这里插入图片描述
使用：
1、npm引入

npm i vue-node-context-menu

2、在main.js中引入

import VueNodeContextMenu from 'vue-node-context-menu';

3、在组件中使用
3.1、html：在html中使用v-node-context-menu 指令

<div style="width:500px;height:500px;background:#000;" v-node-context-menu="{node:item,menu:menu}" v-for="(item,index) in list" >{{item.name}}</div>

3.2、js

data(){
  return {
    list:[ //当前想要遍历的数据
      {
        name:'1',
        id:0
      }
    ],
    menu:[ //右键菜单
      {
        text:"返回",
        icon:"",
        handler:this.nodeConextMenu #回调行数
      },
      {
        text:"重新加载",
        icon:"",
        handler:this.nodeConextMenu
      },
      {
        text:"打印",
        icon:"",
        handler:this.nodeConextMenu
      }
    ]
  }
},
methods:{
  #click menu to callbck  点击菜单选项的回调函数 node 为当前点击的数据，menu为当前点击菜单的对象
  nodeConextMenu(node,menu){
  	
  }
}

最后大功告成.
字段解释:
v-node-context-menu

字段	说明	是否必填
v-node-context-menu	自定义右键菜单的指令	是
node	当前遍历的某一项	否
menu	右键菜单的选项	是

menu

字段	说明	是否必填
text	菜单名称	是
icon	图标	否
handler	点击菜单的回调函数,function(node,menu)会有两个参数返回,node:为当前点击的数据,menu为当前点击菜单的数据	是