e-vue-contextmenu 用户右键时 根据鼠标位置出现选项菜单

在项目终端中执行

npm install e-vue-contextmenu --save

引入第三方依赖
然后在main.js上引入

import EVueContextmenu from 'e-vue-contextmenu'

Vue.use(EVueContextmenu);

main.js参考代码如下

import Vue from 'vue'
import App from './App.vue'
import EVueContextmenu from 'e-vue-contextmenu'

Vue.use(EVueContextmenu);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

通过@contextmenu.prevent控制右键事件
在e-vue-contextmenu中书写菜单模板
参考代码如下

<template>
  <div id="app">
    <div @contextmenu.prevent="rightClick($event)">你好</div>
    <e-vue-contextmenu
      ref="ctxshow"
      id="contextStyle"
      class="menu"
      @ctx-show="show"
      @ctx-hide="hide"
    >
        <div>
          你好
        </div>
        <div>
          我很好
        </div>
        <div>
          大家都好
        </div>
    </e-vue-contextmenu>
  </div>
</template>

@contextmenu.prevent是绑定用户在元素上右键时出发事件
show 当菜单显示时触发的函数
hide 当菜单隐藏时处罚的函数
这三个函数的参考代码如下

 methods:{
    rightClick(e){
      this.$refs.ctxshow.showMenu(e)
    },
    show(data) {
      console.log(data)
      console.log('显示菜单')
    },
    hide(data) {
      console.log(data)
      console.log('显示菜单')
    },
  }

然后启动项目

当我们把鼠标放在你好上点击右键时

效果也是非常的简单好用
至于菜单里的几个div
你们可以自己去写样式
让他好看一些
也可以去给菜单里的div绑定一些例如 @click的事件任务