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、调整右键样式

<style scoped>
a {
  color: #333;
}
.right-menu {
  position: fixed;
  background: #fff;
  border: solid 1px rgba(0, 0, 0, .2);
  border-radius: 3px;
  z-index: 999;
  display: none;
}
.right-menu a {
  width: 75px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: block;
  color: #1a1a1a;
}
.right-menu a:hover {
  background: #eee;
  color: #fff;
}
.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
  border-radius: 1px;
}
a {
  text-decoration: none;
}
.right-menu a {
  padding: 2px;
}
.right-menu a:hover {
  background: #42b983;
}
path {
  fill: black;
}
</style>

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

初始化代码
这里对echarts图表添加右键菜单

 this.myChartOne.on('contextmenu', 'series', params => {
          params.event.event.preventDefault();
          this.selectedIndex = params.dataIndex;
          // console.log(params.dataIndex);
        });

数据代码

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