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

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

---

目录

---

---

内容

---

1、效果图示

示例@1-1：

2、源代码

• 源码@2.2-1：

3、布局

2.1、主要所用vuetify组件：

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

• v-navigation-drawer

  • 效果图示：同图示1-1
  • 源代码@2-1：
  • 常用属性详解

名称	类型	默认值	介绍
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 效果同div标签，就是一个容器，v-list下面详解。

2.1.3、v-divider: 分割线

2.1.4、v-list: 菜单列表项

• v-list:列表

  • 图示@3-1：
  • 源代码@3-1：

        
          

          
            
              
            
            
              {{ subItem.action }}
            
          
        
      
	  
	  ...
	  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组件’

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