Vuejs右鍵彈出菜單

一、安裝

npm install @xunlei/vue-context-menu

二、修改main.js

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

三、使用

 <context-menu class="right-menu" 
            :target="contextMenuTarget" 
            :show="contextMenuVisible" 
            @update:show="(show) => contextMenuVisible = show">
            <a href="javascript:;" @click="new">新建</a>
            <a href="javascript:;" @click="del">刪除</a>
        </context-menu>

export default {
    name: 'basetable',
    data() {
        return {
            contextMenuTarget: document.body, //綁定的dom
            contextMenuVisible: false,
            }
        }
}

methods: {
        new(){
            this.contextMenuVisible=false
        },
        del(){
            this.contextMenuVisible=false
        }
    }

四、效果