vue-context-menu 右击菜单

安装

npm install @xunlei/vue-context-menu

在组件代码中引用

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

使用

<template>
  <div >
    <div id="main">
    </div>
    <vue-context-menu class="right-menu"
                      :target="contextMenuTarget"
                      :show="contextMenuVisible"
                      @update:show="(show) => contextMenuVisible = show">
      <a href="javascript:" @click="showScene">展示</a>
    </vue-context-menu>
  </div>
</template>

<script>
  import echarts from 'echarts'

  import {
      component as VueContextMenu } from '@xunlei/vue-context-menu'

  export default {
     
  	components: {
     
      'vue-context-menu': VueContextMenu,
    },

    data() {
     
      return {
     
        contextMenuVisible: false,
        contextMenuTarget: '',
        selectedIndex: '',
      }
    },
    mounted() {
     
      const myChartContainer = document.getElementById('main');
	// 右击显示菜单 区域位置
      this.contextMenuTarget = myChartContainer;
	}
	 // 关闭浏览器右击默认菜单
      myChartContainer.oncontextmenu = function(e){
     
        return false;
      };

      myChart.on('contextmenu', 'series', params => {
     
        params.event.event.preventDefault();
        this.selectedIndex = params.data.id;
      });
    },
    methods: {
     
      showScene() {
     
        console.log(this.selectedIndex)
      },
    }
}
</script>