@lxw15337674/v-context-menu

基于vue的右键菜单组件

Usage no npm install needed!

<script type="module">
  import lxw15337674VContextMenu from 'https://cdn.skypack.dev/@lxw15337674/v-context-menu';
</script>

README

v-contextMenu

基于vue的右键菜单组件

特性

- 集成v-hotkey,支持功能快捷键

用法

  1. 安装插件
npm i @lxw15337674/v-context-menu
  1. 注册为全局组件
import contextMenu from '@lxw15337674/v-context-menu'
Vue.use(contextMenu, 'g');

或者按需引用

import {contextItem,contextMenu} from '@lxw15337674/v-context-menu';

export default {
    name: 'App',
    components: { contextItem,contextMenu },
}
  1. demo
    <contextMenu>
            <div class="content">
              本体内容
            </div>
            <template slot="contextMenu">
                <context-item
                    v-for="menuItem in contextMenu"
                    :key="menuItem.label"
                    :hotkey="menuItem.hotkey"
                    :divided="menuItem.divided"
                    :disabled="menuItem.disabled"
                    :callback="menuItem.callback"
                    :hotkey="menuItem.hotkey"
                >
                </context-item>
            </template>
        </contextMenu>

data: function () {
        return {
            contextMenu: [
                {
                    label: '显示',
                    callback: () => {
                        console.log('显示');
                    },
                    hotkey: 'enter',
                    disabled: true,
                },
                {
                    label: '粘贴',
                    callback: () => {
                        console.log('粘贴');
                    },
                    hotkey: 'ctrl+v',
                },
            ],
        };
    },

context-menu

菜单主题

组件props参数

参数 说明 类型 是否必填 可选值 默认值
disabled 是否禁用菜单 Booelan true/false false
### 组件事件
参数 说明 回调参数
show 菜单显示时触发
close 菜单关闭时触发

context-item

菜单项

组件props参数

参数 说明 类型 是否必填 可选值 默认值 举例
label 菜单项标题 String/Number
hotkey 功能快捷键 String ctrl+c
callback 回调函数 Function
divided 是否在上方添加分隔符 Boolean true/false false
disabled 是否禁用 Boolean true/false false
autoHide 被点击后菜单是否自动隐藏 Boolean true/false false
### 组件事件
参数 说明 回调参数
click 被点击时触发的事件 当前元素实例、点击事件