前言

写着玩系列2,。dashboard之前做过好几回了，这次就做个简易版顺当记录吧，日后drawer啥的功能更新再加上。

vuetify dashboard

vuetify是个强大的组件库这就不介绍了，详见官网：vuetify首页

Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。

效果

源码地址在这：vuetify dashboard源码

工具栏

v-app-bar 组件用于应用程序范围内的操作和信息。

• v-app-bar-nav-icon：专门为 v-toolbar 和 v-app-bar 创建的图标按钮组件。通常作为汉堡包菜单出现在工具栏的左侧，它通常用于控制导航抽屉的状态。default 插槽可以用来定制这个组件的图标和功能。

就是这个玩意儿：

通过控制它的点击事件，可以控制边框栏的展开收回

      <v-app-bar-nav-icon @click="drawer = true"/>
      <v-navigation-drawer v-model="drawer"></v-navigation-drawer>
      
       data() {
      return {
        drawer: false,
        }
       }

滑入效果

关于左侧菜单栏的滑入效果可以通过对v-navigation-drawer的transition属性进行设置。（本demo是默认的）

背景图

v-navigation-drawer自带插槽，插入图片即可全覆盖。

    <v-navigation-drawer
      v-model="drawer"
      src="https://c-ssl.duitang.com/uploads/item/201505/05/20150505191905_VQWvr.jpeg"
    >

路由设置

nuxt集成了vuex，使得路由跳转、设置极为方便。

创建需要跳转的liquidText.vue，router.js中自动会生成路径如下：

再用vuetify的list组件，遍历每个item生成不同的list-item，添加点击时进行跳转的方法。

<v-list-item-group v-model="item">
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
            link
            @click="$router.push({ path: item.to })"
          >
            <v-list-item-icon>
              <v-icon>{{item.icon}}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{item.title}}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
        
        //data
        items: [
          {icon: 'mdi-apps', title: 'Home', to: '/'},
          {icon: 'mdi-account', title: 'liquidText', to: '/svgdemo/liquidText'}
        ],

就可以产生如图的效果了。