This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

auth-menu

介绍

• 一个通过后台数据动态渲染的导航菜单组件，可已实现根据不同用户权限加载不同的菜单
• 目前只支持一级或二级目录，不支持三级以上目录

使用方法

  // 安装
  npm install auth-menu --save
 
  // 引入
  import AuthMenu from 'auth-menu'
 
  // 在components中注册
  components: { AuthMenu }
 
  // 在组件中使用,menuList就是从后台获取的数据
  <AuthMenu :menu="menuList" />
 
  // 应与后台开发人员协商好返回的数据格式如下，其中parentId为空的表示一级菜单，不为空的表示id相同的一级菜单下的二级菜单
  [
    {
      id: 'index',
      name: '首页',
      parentId: ''
    },
    {
      id: 'order',
      name: '订单',
      parentId: 'index'
    },
    {
      id: 'out',
      name: ' 进销存',
      parentId: 'index'
    },
    {
      id: 'about',
      name: '关于我们',
      parentId: ''
    }
  ]
 
  // 如果前端想在插入或追加固定菜单，可在获取到菜单数据后处理返回的数据，如：
  let addList = [
    {
      id: 'test',
      name: ' 固定菜单',
      parentId: ''
    },
    {
      id: 'test01',
      name: ' 子菜单01',
      parentId: 'test'
    },
    {
      id: 'test02',
      name: ' 子菜单02',
      parentId: 'test'
    }
  ]
  this.menuList = this.menuList.concat(addList)

可配置属性

属性名	默认值	类型	描述
menu	[]	Array	菜单数据
lineHeight	60	Number	导航栏行高
itemWidth	120	Number	菜单每项的宽度
mainBgColor	rgba(255, 255, 255, 0)	String	导航栏背景色
mainTextColor	rgba(255, 255, 255, 1)	String	一级菜单文字颜色
mainBgColorActive	rgba(0, 78, 139, 1)	String	导航栏选中时背景色
mainTextColorActive	rgba(255, 255, 255, 1)	String	一级菜单选中时文字颜色
subBgColor	rgba(255, 255, 255, 1)	String	二级菜单背景色
subTextColor	rgba(102, 102, 102, 1)	String	二级菜单文字颜色
subTextColorActive	rgba(54, 162, 241, 1)	String	二级菜单选中时文字颜色

• *提示：颜色可以使用十六进制、rgba、字符串（red）等来表示