Vue-nav-tree NPM

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	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 安装以及使用

安装

npm i vue-nav-tree --save

main.js

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

components

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

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'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}