Nuclear Pumpkin Mayhem

    auth-menu

    1.0.0 • Public • Published

    介绍

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

    使用方法

      // 安装
      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)等来表示

    Install

    npm i auth-menu

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    45.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • wudandong