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

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组件’

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