penggelies07/vue-context-menu

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

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

方式3 独立版本引入，自动全局注册

前提是 vue 也是独立版本通过script标签引入

<script src="./node_modules/dist/vue-context-menu.js"></script>

2. 模版语法

 <context-menu class="right-menu" 
    :target="contextMenuTarget" 
    :show="contextMenuVisible" 
    @update:show="(show) => contextMenuVisible = show">
    <a href="javascript:;" @click="copyMsg">复制</a>
    <a href="javascript:;" @click="quoteMsg">引用</a>
    <a href="javascript:;" @click="deleteMsg">删除</a>
</context-menu>

Props

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

Events

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

注意

如果target是某个兄弟元素，可以使用 $refs来访问，但是注意请在父组件mounted 之后获取。

参考 https://cn.vuejs.org/v2/guide/components.html#子组件索引

ChangeLog

• [1.0.1] 2017-07-10

  • 修复 target 为空时可能出错的bug

• [1.0.0] 2017-06-23

  • 实现右键菜单基本功能

Development Setup

# install deps
npm install

# serve demo at localhost:8080
npm run dev

# build library and demo
npm run build

# build library
npm run build:library

# build demo
npm run build:demo

License

MIT

Copyright (c) 2017 赵兵