Vue 自定义右键菜单

Vue 自定义右键菜单

在Vue中可能涉及到对右键菜单的使用（比如右键选中删除），并且希望使用自定义的右键菜单条目。实现过程记录如下。

1、环境配置

vue echarts安装不赘述，这里需要使用特定的右键菜单插件: @xunlei/vue-context-menu

npm install @xunlei/vue-context-menu

2、在组件代码里引用

<script>
// 其他引用
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
export default{
	'vue-context-menu': VueContextMenu
}
</script>

3、在html中编写右键菜单内容

这里只写了删除条目作为例子，可以根据需求自行添加

<vue-context-menu class="right-menu"
                    :target="contextMenuTarget"
                    :show="contextMenuVisible"
                    @update:show="(show) => contextMenuVisible = show">
        <a href="javascript:" @click="deleteDataIndex">删除a>
vue-context-menu>

4、在JS里对右键菜单数据以及功能进行配置

数据代码

data(){
	return {
		// other data
		// 这里对应右键菜单的show与target
		contextMenuVisible: false,
	    contextMenuTarget:document.body,
	    // other data
	}
}

方法代码

methods:{
	deleteDataIndex(){
		// do delete action
	}
}

5、效果图

详细说明 https://github.com/xunleif2e/vue-context-menu