Vuejsは、右のポップアップメニュー

まず、インストール

@迅雷/ VUE-コンテキスト・メニューをNPMインストール

第二に、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
        }
    }

第四に、効果

おすすめ

転載: www.cnblogs.com/qinshengfei/p/12540666.html
おすすめ