vue-contextmenu

Feature

• 右键菜单

• 多级子菜单

• 自定义item render

• 自定义替换右键菜单组件

开发文档

Vue右键菜单指令

使用方式

引入依赖

npm i @shymean/vue-contextmenu -S

// 引入默认菜单样式，如果使用自定义菜单组件则无需引入
import '@shymean/vue-contextmenu/dist/index.css'

import contextmenu from '@shymean/vue-contextmenu'

const options = {} // 注册参数
// 注册全局 v-contextmenu 指令
Vue.use(contextmenu, options)

支持注册参数

• name 指令名称, 默认contextmenu
• menuComponent菜单组件，默认使用内置的Menu组件，可传入自定义菜单组件展示

自定义组件接收下面props，然后通过插件配置项传入即可

props: {
    // 菜单是否展示
    visible: {
      type: Boolean,
      default: false
    },
    // 菜单列表
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
},

使用指令

<template>
  <div id="app">
    <button v-contextmenu="{menuList, onShow}">右键菜单</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  computed: {
    menuList() {
      return [
        {
          text: '菜单1',
          onClick: () => {
            console.log(1)
          }
        },
        {
          text: '菜单2', onClick: () => {
            console.log(2)
          }
        }
      ]
    },
  },
  methods:{
    onShow(){
      // init
    }
  }
}
</script>

支持binding传值

• menuList，菜单列表，格式如下
  • text 菜单名称，支持下面两种类型
    • String 默认字符串，展示菜单名称
    • Function 自定义内容render方法，返回一个VNode
  • onClick 点击事件
  • children 子菜单，格式与一级菜单相同，可嵌套实现多级菜单
• onShow，钩子函数，在菜单展示时触发