Vue array right-click menu to get current node data

If you need to use the right-click menu on data traversal or on the page, you can consider the following solutions:
The old rules first look at the picture:

Use:
1. npm import

npm i vue-node-context-menu

2. Introduce in main.js

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

3. Use 3.1, html in components
: use v-node-context-menu directive in html

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

Finally, you're done.
Field explanation:
v-node-context-menu

field	illustrate	Is it required?
v-node-context-menu	Customize the commands of the right-click menu	yes
node	An item currently traversed	no
menu	Right-click menu options	yes

menu

field	illustrate	Is it required?
text	menu name	yes
icon	icon	no
handler	Click the callback function of the menu, function(node,menu) will return two parameters, node: is the data currently clicked, and menu is the data of the currently clicked menu	yes