vuetify学习第四天-典型导航菜单实现
目录
文章目录
内容
1、效果图示
示例@1-1:
2、源代码
-
源码@2.2-1:
<template> <v-navigation-drawer> <v-toolbar> ... </v-toolbar> <v-divider /> <v-list> ... </v-list> </v-navigation-drawer> </template>
3、布局
2.1、主要所用vuetify组件:
2.1.1、v-navigation-drawer:导航菜单
-
v-navigation-drawer
- 效果图示:同图示1-1
- 源代码@2-1:
<template> <v-navigation-drawer :dark="dark" :mini-variant="miniVariant" v-model="drawer" enable-resize-watcher :mini-variant-width="miniVariantWidth" fixed app > ... </v-navigaiton-drawer> ... </template> <script> export default { data() { return { dark: false, // 主体是否深色 miniVariant: false, // 是否展示为mini图标 drawer: true, // 左侧导航是否隐藏 title: "乐优后台管理系统", // 导航标题 miniVariantWidth: 200, menuList: [], // 菜单列表 pathName: {}, items: [] }; } </script>
- 常用属性详解
名称 | 类型 | 默认值 | 介绍 |
---|---|---|---|
color | material colo | undefined | 导航颜色样式 |
dard | boolean | false | 背景是否为深色 |
enable-resize-watcher | boolean | false | 根据移动或者桌面的大小,是否自动打开/关闭导航 |
fixed | boolean | false | 是否使用固定定位 |
mini-variant | boolean | false | 压缩导航宽度,点击是否再次打开 |
mini-variant-width | numeric | 80 | 压缩导航宽度,依赖于上面的属性 |
value | boolean | false | 控制导航的显示/隐藏 |
2.1.2、v-toolbar:工具栏
-
v-toolbar:工具栏
-
效果图:
-
源代码:
<v-toolbar flat> <v-list> <v-list-item> <v-list-item-avatar> <img src="../assets/2.jpeg" /> </v-list-item-avatar> <v-list-item-content> <v-list-item-title>虎哥</v-list-item-title> <v-list-item-subtitle>管理员</v-list-item-subtitle> </v-list-item-content> </v-list-item> </v-list> </v-toolbar>
- 解析:v-toolbar 效果同div标签,就是一个容器,v-list下面详解。
-
2.1.3、v-divider: 分割线
2.1.4、v-list: 菜单列表项
-
v-list:列表
- 图示@3-1:
- 源代码@3-1:
<v-list flat>
<v-list-group
v-for="item in menuList"
:key="item.id"
v-model="item.active"
:prepend-icon="item.action"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="subItem in item.items"
:key="subItem.id"
:to="item.path + subItem.path"
>
<v-list-item-content>
<v-list-item-title v-text="subItem.title"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-item-action>
</v-list-item>
</v-list-group>
</v-list>
...
menuList: [] //后端获取菜单项数组
示例:
{
"id": 1,
"title": "首页",
"path": "/index",
"pid": 0,
"sid": "6",
"description": "",
"create_time": "2019-12-19 16:46:28",
"modify_tiem": "2019-12-23 18:28:05",
"action": "home",
"items": [
{
"id": 6,
"title": "统计",
"path": "/report",
"pid": 1,
"sid": "",
"description": "",
"create_time": "2019-12-19 16:51:02",
"modify_tiem": "2019-12-19 16:51:02",
"action": ""
}
]
},
{
"id": 2,
"title": "商品管理",
"path": "/item",
"pid": 0,
"sid": "7, 8, 9, 10",
"description": "",
"create_time": "2019-12-19 16:46:29",
"modify_tiem": "2019-12-23 18:28:05",
"action": "apps",
"items": [
{
"id": 7,
"title": "分类管理",
"path": "/category",
"pid": 2,
"sid": "",
"description": "",
"create_time": "2019-12-19 16:56:07",
"modify_tiem": "2019-12-19 16:56:07",
"action": ""
},
{
"id": 8,
"title": "品牌管理",
"path": "/brand",
"pid": 2,
"sid": "",
"description": "",
"create_time": "2019-12-19 16:56:07",
"modify_tiem": "2019-12-19 16:56:07",
"action": ""
},
{
"id": 9,
"title": "商品列表",
"path": "/goodsList",
"pid": 2,
"sid": "",
"description": "",
"create_time": "2019-12-19 16:56:07",
"modify_tiem": "2019-12-19 16:56:07",
"action": ""
},
{
"id": 10,
"title": "规格参数",
"path": "/specification",
"pid": 2,
"sid": "",
"description": "",
"create_time": "2019-12-19 16:56:07",
"modify_tiem": "2019-12-19 16:56:07",
"action": ""
}
]
}
...
- v-list
名称 | 类型 | 默认值 | 介绍 |
---|---|---|---|
color | material colo | undefined | 导航颜色样式 |
dard | boolean | false | 背景是否为深色 |
flat | boolean | false | 是否移除选中条目背景高亮 |
4、后记
整页源代码参考博文’ vuetify学习第三天之布局-bars组件’
后记 :如果菜单项目过大,可以考虑实现子级菜单懒加载。原理默认请求后端一级菜单,和默认一个二级菜单。当鼠标点击其他一级菜单时候,触发后端子菜单请求,并且展示。不同于数据表格,一般菜单项不会太多。