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 安装以及使用
- 安装
npm i vue-nav-tree --save
- main.js
Vue
- components
- example 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
Copyright (c) 2020-present, Jenkin Yu