Wondering what’s next for npm?Check out our public roadmap! »

    @shymean/vue-contextmenu

    0.1.4 • Public • Published

    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,钩子函数,在菜单展示时触发

    Install

    npm i @shymean/vue-contextmenu

    DownloadsWeekly Downloads

    10

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    153 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar