昨天已经将 Header 做好了

今天就接着昨天的进度吧～

还记得昨天将 header 上的按钮设置为 gt-xs 吗

因为手机页面没办法在上方的 toolbar 显示这么多按钮

所以我们发现分辨率太低，就要将按钮隐藏起来

隐藏之后该怎么显示呢

当然就是用 侧栏菜单(Drawer) 来显示啦

---

本篇演示项目

• Drawer
• Lists and List Items

本次修改的范围

文件一样都是 src/layouts/Mylayout.vue 哦

修改 Drawer

先把缺省的Drawer修改一下

变成这样

    <q-layout-drawer
      v-model="rightDrawerOpen"
      content-class="bg-grey-10"
      side="right"
    >
    ...

先把控制弹出侧栏的变量改成 rightDrawerOpen

再来调整背景颜色content-class="bg-grey-10"

因为按钮是在右边，所以侧栏在右边也很合理

缺省会是在左边，所以我们把它设成右边 side="right"

刚刚多了这个变量 rightDrawerOpen 记得加到 data 里喔

缺省给他 false ，如果是 true 那一进页面就会是打开的喔

<script>
export default {
  name: 'MyLayout',
  data () {
    return {
      rightDrawerOpen: false
    }
  }
}
</script>

---

手机版按钮

再来 补上小分辨率时要显示的按钮

这边控制显示的 class 用 lt-sm 只要分辨率小于 sm（768px）就会显示该区块

关于显示的 class 可以参考 CSS Visibility

这边记得加在q-toolbar里面喔

然后指定点击事件(@click)时去修改rightDrawerOpen为true

     <q-toolbar>
        ...
        
        <div class="lt-sm">
          <q-btn 
          icon="fas fa-bars" 
          flat 
          @click="rightDrawerOpen = true" />
        </div>
        
        ...
      </q-toolbar>

---

设置 List 与 ListItem

这边就要设置 Drawer 里的组件啦

这边我们用 list 以他原本的来做修改就好

      <q-list
        no-border
        link
        inset-delimiter
        dark
      >
        <q-list-header>来去旅游</q-list-header>
        <q-item>
          <q-item-side icon="fas fa-search-location" />
          <q-item-main label="精选景点" />
        </q-item>
        <q-item>
          <q-item-side icon="fas fa-map-marked-alt" />
          <q-item-main label="美食地图"/>
        </q-item>
        <q-item>
          <q-item-side icon="fas fa-utensils" />
          <q-item-main label="夜宿晓行" />
        </q-item>
        <q-item>
          <q-item-side icon="fas fa-sign-in-alt" />
          <q-item-main label="登录" />
        </q-item>
        <q-item>
          <q-item-side icon="far fa-edit" />
          <q-item-main label="注册" sublabel="忘记密码？"/>
        </q-item>
      </q-list>

list 也有蛮多属性能够设置的

现在就让我们来看看

使用 Dark 属性来使组件内容在暗色背景更好显示

有蛮多组件都带有 dark 属性能够调整

主要是在暗色背景的情况下能够高亮显示

• 设置 Dark 前

List 中可用组件

这边的组件很多都要自己去设置档中引入哦

• QListHeader (清单上的标题)
• QItemSeparator (分隔线)
• QItem
• QItemSide (可分成左右两侧的区块)
• QItemMain (中间的区块)
• QItemTile (区块中的标题)

像我们这里应用了QListHeader QItem QItemSide QItemMain 也快要都用到了呢!

MyLayout.vue

之后就要开始对其他页面做修改了

完整的 code 如下

<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-header>
      <q-toolbar
        color="primary"
        text-color="pink-13"
        inverted
        
      >
        <q-toolbar-title>
          来去旅游
          <div slot="subtitle">Likey</div>
        </q-toolbar-title>
        <div class="gt-xs">
          <q-btn flat class="q-mr-md">精选景点</q-btn>
          <q-btn flat class="q-mr-md">美食地图</q-btn>
          <q-btn flat class="q-mr-md">夜宿晓行</q-btn>
          <q-btn flat class="q-mr-md">登录</q-btn>
          <q-btn flat class="q-mr-md">注册</q-btn>
        </div>
        <div class="lt-sm">
          <q-btn icon="fas fa-bars" flat @click="rightDrawerOpen = true" />
        </div>
      </q-toolbar>
    </q-layout-header>

    <q-layout-drawer
      v-model="rightDrawerOpen"
      content-class="bg-grey-10"
      side="right"
    >
      <q-list
        no-border
        link
        inset-delimiter
        dark
      >
        <q-list-header>来去旅游</q-list-header>
        <q-item>
          <q-item-side icon="fas fa-search-location" />
          <q-item-main label="精选景点" />
        </q-item>
        <q-item>
          <q-item-side icon="fas fa-map-marked-alt" />
          <q-item-main label="美食地图"/>
        </q-item>
        <q-item>
          <q-item-side icon="fas fa-utensils" />
          <q-item-main label="夜宿晓行" />
        </q-item>
        <q-item>
          <q-item-side icon="fas fa-sign-in-alt" />
          <q-item-main label="登录" />
        </q-item>
        <q-item>
          <q-item-side icon="far fa-edit" />
          <q-item-main label="注册" sublabel="忘记密码？"/>
        </q-item>

      </q-list>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  name: 'MyLayout',
  data () {
    return {
      rightDrawerOpen: false
    }
  }
}
</script>

,

这个框架 设计的网页
很漂亮