后端 [Day 6] Vue Quasar 打造 旅游网站系列 2

guobing · August 12, 2021 · 4 hits

昨天已经将 Header 做好了

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

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

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

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

隐藏之后该怎么显示呢

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


本篇演示项目

https://d1dwq032kyr03c.cloudfront.net/upload/images/20181020/20111805xDJqNeNjdY.png
https://d1dwq032kyr03c.cloudfront.net/upload/images/20181020/20111805KAKtUqXSOa.png

本次修改的范围

文件一样都是 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)时去修改rightDrawerOpentrue

     <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 前

https://d1dwq032kyr03c.cloudfront.net/upload/images/20181020/20111805PwlosIkznW.png

List 中可用组件

https://d1dwq032kyr03c.cloudfront.net/upload/images/20181020/20111805r3tBFKfDoc.png

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

  • 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>


,

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

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.