vue重置鼠标右键，自定义菜单。

vue-context-menu

Vue 2.0 右键菜单组件，菜单内容可以随意自定义

安装

npm install @xunlei/vue-context-menu

在线Demo

https://xunleif2e.github.io/vue-context-menu/demo/dist

使用

1. 注册组件

方式1 利用插件方式全局注册

import VueContextMenu from '@xunlei/vue-context-menu'
import Vue from 'vue'

Vue.use(VueContextMenu)

方式2 局部注册

import { component as VueContextMenu } from '@xunlei/vue-context-menu'

export default {
  // ...
  components: {
    'vue-context-menu': VueContextMenu
  }
}

2. 模版语法

 

data() {
    return {
      contextMenuTarget: document.body, //绑定的dom
      contextMenuVisible: false,
    }
}

Props

参数	说明	类型	可选值	默认值
target	触发右键事件的元素	Element	-	-
show	是否显示右键菜单	Boolean	-	false

Events

事件名	说明	事件参数
update:show	右键菜单显示/隐藏时触发	是否显示