1.0.6 • Published 4 years ago
@fyzhu/vue-context-menu v1.0.6
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 |
width | 右键菜单宽度 | Number | - | 81 |
height | 右键菜单高度 | Number | - | 98 |
Events
事件名 | 说明 | 事件参数 |
---|---|---|
update:show | 右键菜单显示/隐藏时触发 | 是否显示 |
注意
如果target是某个兄弟元素,可以使用 $refs
来访问,但是注意请在父组件mounted 之后获取。
参考 https://cn.vuejs.org/v2/guide/components.html#子组件索引
ChangeLog
- 1.0.3 2020-06-24
- 增加边界检测,在最右侧点击显示在左侧,在最底部点击显示在上侧
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
Copyright (c) 2017 赵兵