1. self-right-menus

self-right-menus

self-right-menus

一个自定义的右键无限层级菜单指令

插件安装
yarn add self-right-menus

npm install self-right-menus --save

插件使用

在项目的入口文件main.ts/main.js中加入下述代码

import rightMenus from "self-right-menus"

Vue.use(rightMenus);

在你的业务代码中,在元素上绑定v-right-menu,然后传对应的参数即可.

传值必须是对象 配置说明 包含哪些键值对

属性 说明 类型 默认值
width 右键菜单宽度 Number 166
content 右键菜单内容数组对象 Array 必传
children 子集菜单对象,有这个对象代表含有子集菜单项 Object 非必传

content 配置说明

属性 说明 类型 默认值
label 菜单名称 String 必传
handler 菜单操作方法 Function 非必传
disabled 菜单是否禁用 Boolean false
berak 菜单分割线位置(默认三个为一组分割) Boolean false

children 配置说明

属性 说明 类型 默认值
width 右键菜单宽度 Number 166
content 右键菜单内容数组对象 Array 必传
children 子集菜单对象,有这个对象代表含有子集菜单项 Object 非必传

例子

<template>

  <div
    v-right-menu="rightMenus"
  >
  </div>

</template>

<script>

export default {
       data(){
           return {
               rightMenus:{
                   width:190,//右键菜单宽度 ;默认值166
                   content:[
                       {
                          label:'复制',//右键菜单子项名称 (必需值)
                          handler:this.copy,//右键菜单子项方法(可选值)
                          disabled:boolean,//子项是否禁用(可选值)
                          break:boolean,//子项分割线标准(不给值默认3个为一组分割)
                          children:{
                             width:180,
                             content:[{
                                 label:'复制',//右键菜单子项名称 (必需值)
                                  handler:this.copy,//右键菜单子项方法(可选值)
                                  disabled:boolean,//子项是否禁用(可选值)
                                  break:boolean,//子项分割线标准(不给值默认3个为一组分割)
                             }]
                          }
                       }
                   ]
               }
           }
       },
       methods:{
         copy(){

         }
       }

  }

}

</script>