vue右击菜单，亲测有效

一、安装 

npm install @xunlei/vue-context-menu

二、全局注册，在main.js引入如下以下文件

import VueContextMenu from '@xunlei/vue-context-menu'
Vue.use(VueContextMenu)

 三、页面

//放在你的页面里面就可以了
<VueContextMenu class="right-menu" 
          ref="contextMenu"
          :target="contextMenuTarget" 
          :show="contextMenuVisible" 
          @update:show="(show) => contextMenuVisible = show">
          <p @click="copyMsg">复制</p>
          <p @click="quoteMsg">引用</p>
          <p @click="deleteMsg">删除</p>
</VueContextMenu>

//JS
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
	 export default {
    	components: { VueContextMenu },
    	data(){
    		return{
    			contextMenuTarget:document.body, // 可右键区域，这里也可以绑定$refs
      			contextMenuVisible:false // 控制菜单显示隐藏
    		}
		},
		mounted() {
			
		},
		methods: {
            copyMsg(){
		      alert('点击复制')
		    },
		    quoteMsg(){
		      alert('点击引用')
		    },  
		    deleteMsg(){
		      alert('点击删除')
		    }  
	
        }
}

//CSS
.right-menu {
	    display: none;
	    position: fixed;
	    background: #fff;
	    border: 1px solid #bababa;
	    border-radius: 3px;
	    z-index: 999;
	    box-shadow: 2px 2px 3px 0px rgba(51, 42, 40, 0.7);
	    border-radius: 1px;
    }
    .right-menu p{
	    margin: 0;
        display: block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: left;
        padding: 0 10px 0 10px;
        color: #000000;
        cursor: pointer;
        font-size: 15px;
        border-bottom: 1px solid #e8eaed;
    }
    .right-menu p:hover{
        background: #e8eaed;
    }
    .menu-disable{
        cursor: no-drop;
        color: #80868b;
    }

如图：

 

因为项目需要所以去学习了一下，做个笔记，以备后面用到。 

参考：https://www.kancloud.cn/wangjiachong/gongzuopian/1238637