xunleif2e / Vue Context Menu
Licence: mit
🗃️ Vue 2.x 右键菜单组件,菜单内容可以随意自定义
Stars: ✭ 279
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Context Menu
Vuewordcloud
Generates a cloud out of the words.
Stars: ✭ 284 (+1.79%)
Mutual labels: plugin, component
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-32.62%)
Mutual labels: plugin, component
Vue Lazy Component
🐌 Vue.js 2.x 组件级懒加载方案-Vue.js 2.x component level lazy loading solution
Stars: ✭ 915 (+227.96%)
Mutual labels: plugin, component
Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (-53.76%)
Mutual labels: plugin, component
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-52.33%)
Mutual labels: plugin, component
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-32.26%)
Mutual labels: plugin, component
Sketch Connection Flow Arrows
Plugin for generating easy to use connection flow arrows in Sketch
Stars: ✭ 275 (-1.43%)
Mutual labels: plugin
Uieffect
UIEffect is an effect component for uGUI element in Unity. Let's decorate your UI with effects!
Stars: ✭ 3,449 (+1136.2%)
Mutual labels: component
Cordova Httpd
Embed tiny web server into Cordova with a plugin
Stars: ✭ 271 (-2.87%)
Mutual labels: plugin
Rollup Plugin Ts
A Typescript Rollup plugin that bundles declarations and respects Browserslists
Stars: ✭ 273 (-2.15%)
Mutual labels: plugin
Paper Switch
🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion
Stars: ✭ 2,902 (+940.14%)
Mutual labels: component
V Track
🕹 A manual tracking decoupling plugin based on Vue directive / 一个基于Vue指令实现的埋点解耦插件~
Stars: ✭ 277 (-0.72%)
Mutual labels: plugin
Clangformat Xcode
Xcode plug-in to to use clang-format from in Xcode and consistently format your code with Clang
Stars: ✭ 2,852 (+922.22%)
Mutual labels: plugin
Hisocket
It is a lightweight client socket solution, you can used it in C# project or Unity3d
Stars: ✭ 275 (-1.43%)
Mutual labels: plugin
Flow Netbeans Markdown
Markdown file support for the NetBeans IDE
Stars: ✭ 276 (-1.08%)
Mutual labels: plugin
React Native Image View
Modal component to view images with zoom
Stars: ✭ 273 (-2.15%)
Mutual labels: component
Protein
💊 Protein is an IntelliJ Plugin to generate Kotlin code for Retrofit 2 and RxJava 2 based on a Swagger definition
Stars: ✭ 273 (-2.15%)
Mutual labels: plugin
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
Copyright (c) 2017 赵兵
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].