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

後記 ：如果菜單項目過大，可以考慮實現子級菜單懶加載。原理默認請求後端一級菜單，和默認一個二級菜單。當鼠標點擊其他一級菜單時候，觸發後端子菜單請求，並且展示。不同於數據表格，一般菜單項不會太多。