vue-nav-tree 是什么

• vue-nav-tree 使用 Css 封装的一款导航菜单插件，只要您是基于 VUE 框架开发便可使用 vue-nav-tree

为什么使用 vue-nav-tree

• 小巧无任何依赖，这意味着无论您使用的什么 UI 框架都可使用
• 此插件开箱即用，只需按照数据结构设置数据源即可

vue-nav-tree 第三方依赖

• vue-router

vue-nav-tree 使用

• Menu Attribute

  | 属性名 | 类型 | 是否必填 | 可选值 | 默认值 | 描述 | | -------------- | ------ | -------- | ------ | ------- | ------------------ | | navData | Array | 是 | - | - | 导航数据源 | | default-active | String | 否 | - | - | 当前激活菜单的 url | | active-color | String | 否 | - | #409EFF | 激活菜单颜色 |

• navData Attribute

  | 属性名 | 类型 | 是否必填 | 可选值 | 默认值 | 描述 | | ----------- | ------ | -------- | ------ | ------ | ------------------------------------ | | funListCode | String | 是 | - | - | 导航唯一编码 | | funListName | String | 是 | - | - | 导航名称 | | funListIcon | String | 否 | - | - | 导航标题 注:图标只针对一级菜单有效 | | funListType | String | 否 | - | fun | 导航类别 group:分组节点 fun:功能节点 | | funListUrl | String | 否 | - | - | 导航路径 funListType=fun 时必填 |

vue-nav-tree 安装以及使用

1. 安装

npm i vue-nav-tree --save

2. main.js

import VueNavTree from 'vue-nav-tree'
Vue.use(VueNavTree)

3. components

<nav-menu :navData="navMenu" :default-active="$route.path"></nav-menu>

4. example data

export default {
  data() {
    return {
      navMenu: [
        {
          funListCode: 'home',
          funListName: '首页',
          funListIcon: 'las la-home',
          funListUrl: '/home'
        },
        {
          funListCode: '1',
          funListType: 'group',
          funListName: '资源管理',
          funListIcon: 'las la-cog',
          children: [
            {
              funListCode: '1-1',
              funListName: '安全管理',
              funListType: 'group',
              children: [
                {
                  funListCode: '1-1-1',
                  funListName: '用户管理',
                  funListUrl: '/user-list'
                },
                {
                  funListCode: '1-1-2',
                  funListName: '角色管理',
                  funListUrl: '/role-list'
                }
              ]
            },
            {
              funListCode: '1-2',
              funListName: '系统配置',
              funListUrl: '/system-conf'
            }
          ]
        },
        {
          funListCode: '2',
          funListName: '帮助中心',
          funListType: 'group',
          funListIcon: 'las la-hands-helping',
          children: [
            {
              funListCode: '2-1',
              funListName: '移动端驱动测试',
              funListType: 'group',
              children: [
                {
                  funListCode: '2-1-1',
                  funListName: '原生插件测试',
                  funListType: 'group',
                  children: [
                    {
                      funListCode: '2-1-1-1',
                      funListName: '相机测试',
                      funListUrl: '/camera-test'
                    }
                  ]
                },
                {
                  funListCode: '2-1-2',
                  funListName: '平台测试',
                  funListType: 'group',
                  children: [
                    {
                      funListCode: '2-1-2-1',
                      funListName: 'Android端',
                      funListType: 'group',
                      children: [
                        {
                          funListCode: '2-1-2-1-1',
                          funListName: '内置应用',
                          funListUrl: '/built-in-test'
                        },
                        {
                          funListCode: '2-1-2-1-2',
                          funListName: '第三方应用',
                          funListUrl: '/other-test'
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              funListCode: '2-2',
              funListName: 'PC端驱动测试',
              funListType: 'group',
              children: [
                {
                  funListCode: '2-2-1',
                  funListName: '总控接口测试',
                  funListUrl: '/asm-api'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

License

MIT

Copyright (c) 2020-present, Jenkin Yu