Vuejs右键弹出菜单

拈花ヽ惹草 提交于 2020-03-21 18:03:37

3 月,跳不动了?>>>

一、安装

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
        }
    }

四、效果

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!