右键弹出菜单组件 vue-context-menu

右键菜单组件有：vue-context-menu:、v-contextmenu:

这两种组件按照自己的需求进行选择

一、vue-context-menu

1、安装

npm install vue-context-menu --save

2、引入

全局引入：项目入口文件 main.js
import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

局部引入(如 user1.vue 文件)
import VueContextMenu from 'vue-contextmenu'
export default{
    components: { VueContextMenu }
}

3、使用

    
        
    



export default{
    data(){
        return {
            contextMenuData: {
                menuName: '',
                axis: {
                    x: null,
                    y: null
                },
                menulists: [
                    {
                        fnHandler: 'fn',
                        btnName: '点击此处调用 fn 函数'
                    },
                    {
                        fnHandler: 'fn1',
                        btnName: '点击此处调用 fn1 函数'
                    },
                ]
            }
        }
    },
    methods: {
        fn(){},
        fn1(){}
    }
}

二、v-contextmenu

1、安装

npm i -S v-contextmenu@next

或者 cdn 引入

2、引入

全局引入：入口文件 main.js
import contextmenu from 'v-contextmenu'
import 'v-contextmenu/dist/themes/default.css'
Vue.use(contextmenu)


局部引入：如在 user.vue 文件中引入
import { directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';
import 'v-contextmenu/dist/themes/default.css'
export default {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  }
}

3、使用

  
    菜单1
    
    菜单2
    
    菜单3
  
  右键点击此区域



import { directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';
import 'v-contextmenu/dist/themes/default.css'
export default {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  },

  methods: {
    clickF1(){}
  }
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/d5660f0422.html