vue-context-menu

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

安装

npm install @shuaninfo/vue-context-menu

在线Demo

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

使用

1. 注册组件

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

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

Vue.use(VueContextMenu)

方式2 局部注册

import { component as VueContextMenu } from '@shuaninfo/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 | 右键菜单显示/隐藏时触发 | 是否显示 | | action | 右键点击事件 | event |

注意

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

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

ChangeLog

• [1.1.0] 2021年3月12日
  • 在网页右下方点击右键，菜单向左上显示
• action右键点击事件
• [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) 2021年3月12日 傅长路