vuetify学习第四天-典型导航菜单实现

文章目录

1、效果图示
2、源代码
3、布局
- 2.1、主要所用vuetify组件：
- - 2.1.1、v-navigation-drawer：导航菜单
  - 2.1.2、v-toolbar：工具栏
  - 2.1.3、v-divider: 分割线
  - 2.1.4、v-list: 菜单列表项
4、后记

内容

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"fixedapp>...</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-groupv-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-itemv-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组件’

后记：如果菜单项目过大，可以考虑实现子级菜单懒加载。原理默认请求后端一级菜单，和默认一个二级菜单。当鼠标点击其他一级菜单时候，触发后端子菜单请求，并且展示。不同于数据表格，一般菜单项不会太多。

vuetify学习第四天-典型导航菜单实现相关推荐

学习Bootstrap知识记录点-----导航菜单操作
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 导航元素本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 ...
我的学习笔记004--javascript实现旋转导航菜单mxx
使用的方法 1,js dom css 2,Math函数示例代码 <!<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transition ...
导航菜单设计五步法——B端设计指南
www.pmcaff.com 本文为PMCAFF作者 CE大人于社区发布导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结前言在任意一 ...
bootstrap学习（四）输入框、导航
bootstrap学习(四)输入框.导航输入框组: 基本用法: //form-control 占满 //input-group:输入框组 //input-group-addon:输入框前加入一个前缀 ...
Element UI学习4--NavMenu 导航菜单
1.顶栏导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式. 在菜单中通过submenu组件可以生成二级菜单. <tamplate> <div> <e ...
vue element UI 学习总结笔记（九）_ 导航菜单与路由
获取用户信息我们把 login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息. router.beforeEach((to, from, next) => {if ( ...
下拉菜单，汉堡菜单，Mega menu… 学习5种常见UI导航设计
可访问的导航将引导用户浏览 UI 中的信息流,并帮助他们完成任务.提高用户体验. Web/移动转化率.同样,如果用户无法在网站或app找到方向,那么该网站/app对他们毫无用处 -- 糟糕的导航设计会 ...
【前端学习日记】ElementUi+导航菜单+面包屑+Tag标签联动
目录导航菜单的渲染路由跳转联动面包屑标签联动总结思路:导航菜单是负责路由跳转的,面包屑和Tags标签通过读取事件路由跳转的数据进行渲染,这里涉及到组件间通信,使用vuex状态管理器来管理这部 ...
ABP入门系列（6）——定义导航菜单
ABP入门系列目录--学习Abp框架之实操演练源码路径:Github-LearningMpaAbp 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手 ...

vuetify学习第四天-典型导航菜单实现

vuetify学习第四天-典型导航菜单实现

目录

文章目录

内容

1、效果图示

2、源代码

3、布局

2.1、主要所用vuetify组件：

2.1.1、v-navigation-drawer：导航菜单

2.1.2、v-toolbar：工具栏

2.1.3、v-divider: 分割线

2.1.4、v-list: 菜单列表项

4、后记

vuetify学习第四天-典型导航菜单实现相关推荐

最新文章

热门文章