第04期调整界面布局__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

1、调整项目主题色

/src/css/quasar.variables.scss 文件中，将主题色修改为 #086491

看效果：

在这里需要说明下，Quasar框架的特点就是，在VSCode中修改了代码，在浏览器中就能及时查看到效果。（提示：要想查看到修改代码的效果，一是，项目要正常运行，说白了就是命令行中项目是启动的状态，二是，在VS Code中修改了代码，需要Ctrl+S保存后，才能看到效果）

2、调整工具栏

src/layouts/MainLayout.vue

删除默认的app名称，以及Quasar版本号

<q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <!-- <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div> -->

      </q-toolbar>
    </q-header>

调整为如下：

<q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <!-- 取消掉项目默认的app名称和Quasar的版本号-->
        <!-- <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div> -->
      </q-toolbar>

      <!-- 标题Todo，副标题日期，暂时写死为Monday 4 November-->
      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
      </div>

    </q-header>

先来看看效果：

接下来，我们一起看看上面增加的代码：


      <!-- 标题Todo，副标题日期，暂时写死为Monday 4 November-->
      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
      </div>

查看Quasar文档http://www.quasarchs.com/style/typography

现在可以理解，class="text-h3" class="text-subtitle1" 的用处就是调整文本的标题级别，设置样式。

        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>

再来看Quasar文档，http://www.quasarchs.com/style/spacing

可以理解，class="q-px-lg q-pt-xl q-mb-md" 的主要作用就是调整元素的间距

q-px-lg 的意思就是：间距方式padding，左右方向，大小为large

q-pt-xl 的意思就是：间距方式padding，顶部方向，大小为extra large

q-mb-md 的意思就是：间距方式margin，底部方向：大小为medium

如果不调整，效果如下：

增加class="q-px-lg q-pt-xl q-mb-md" 后，效果如下：

3、设置工具栏背景图

首先到https://pixabay.com/ 下载免费的背景图，图片链接地址https://pixabay.com/photos/mountains-sunrise-dawn-beautiful-1985027/

然后将下载到的背景图片，放在项目目录的文件夹中 src/statics

工具栏完整代码如下：

<q-header>
    <q-toolbar>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        @click="leftDrawerOpen = !leftDrawerOpen"
      />
    </q-toolbar>

      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
      </div>
      
      <!-- 工具栏背景图-->
      <q-img
        src="../statics/mountains.jpeg"
        class="header-image absolute-top"/>

    </q-header>

CSS样式

height: 100%; 高度填充工具栏 z-index: -1; 重叠位置为下一层 opacity: 0.2; 透明度filter: grayscale(100%); 改变图像的灰度

<style lang="scss">
  .header-image {
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    filter: grayscale(100%);
  }
</style>

最终效果如下：

4、动态的显示今天的日期

Quasar提供了一组函数可以很方便的显示时间，我们查看文档看下

http://www.quasarchs.com/quasar-utils/date-utils

// 导入时间函数
import { date } from 'quasar'
// 时间戳
let timeStamp = Date.now()
// 格式化时间
let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')

在项目中代码如下：

html模版中，将原来写死的日期，用{{ todaysDate }} 模版变量代替

<div class="q-px-lg q-pt-xl q-mb-md">
    <div class="text-h3">Todo</div>
    <div class="text-subtitle1">{{ todaysDate }}</div>
</div>

js代码中，通过computed计算属性，定义todaysDate方法返回当前的时间

<script>
// 导入date函数
import {date} from 'quasar'

export default {
  name: 'MainLayout',
  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData
    }
  },

  // 计算属性，获取当前的时间
  computed: {
    todaysDate() {
      // 当前时间的时间戳
      let timeStamp = Date.now()
      // 返回格式化的时间
      return date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
    }
  }
}

</script>

最终效果如下：

最后调整下，时间的显示格式：'dddd D MMMM'

// 计算属性，获取当前的时间
  computed: {
    todaysDate() {
      // 当前时间的时间戳
      let timeStamp = Date.now()
      // 返回格式化的时间
      return date.formatDate(timeStamp, 'dddd D MMMM')
    }
  }

5、替换侧边抽屉菜单栏

侧边栏，对应到截图中标记红框的区域

项目中对应的代码如下：

src/layouts/MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
			...
    </q-header>

		<!-- 侧边抽屉菜单栏 -->
    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

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

接下来，在Quasar文档中，找合适的侧边栏替换下原有的侧边栏

http://www.quasarchs.com/layout/drawer

将代码拷贝到项目中，并且清除掉原有侧边栏的代码，最终代码如下：

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <!-- 取消掉项目默认的app名称和Quasar的版本号-->
        <!-- <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div> -->
      </q-toolbar>

        <div class="q-px-lg q-pt-xl q-mb-md">
          <div class="text-h3">Todo</div>
          <div class="text-subtitle1">{{ todaysDate }}</div>
        </div>
        <!-- 工具栏背景图 -->
        <q-img
          src="../statics/mountains.jpeg"
          class="header-image absolute-top"/>

    </q-header>

    <!-- 侧边抽屉菜单栏 -->
    <!-- 将v-model的默认值drawer修改为leftDrawerOpen -->
    <q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="200"
        :breakpoint="400"
      >
        <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
          <q-list padding>
            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="inbox" />
              </q-item-section>

              <q-item-section>
                Inbox
              </q-item-section>
            </q-item>

            <q-item active clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="star" />
              </q-item-section>

              <q-item-section>
                Star
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="send" />
              </q-item-section>

              <q-item-section>
                Send
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="drafts" />
              </q-item-section>

              <q-item-section>
                Drafts
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>

        <q-img class="absolute-top" src="https://cdn.quasar.dev/img/material.png" style="height: 150px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src="https://cdn.quasar.dev/img/boy-avatar.png">
            </q-avatar>
            <div class="text-weight-bold">Razvan Stoenescu</div>
            <div>@rstoenescu</div>
          </div>
        </q-img>
    </q-drawer>

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

<script>
	import EssentialLink from 'components/EssentialLink.vue'
	// 导入date函数
	import {date} from 'quasar'

	export default {
	  name: 'MainLayout',
	  
	  data () {
	    return {
	      leftDrawerOpen: false,
	    }
	  },
	  // 计算属性
	  computed: {
	    todaysDate() {
	      // 当前时间的时间戳
	      let timeStamp = Date.now()
	      // 返回格式化的时间
	      return date.formatDate(timeStamp, 'dddd D MMMM')
	    }
	  }
	}
</script>

<style lang="scss">
  .header-image {
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    filter: grayscale(100%);
  }
</style>

效果如下：

5.1、侧边抽屉栏细节调整

修改头像、背景图、昵称

<q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="200"
        :breakpoint="400"
      >
        <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
          <q-list padding>
           ...
          </q-list>
        </q-scroll-area>
				
				<!-- 侧边栏顶部背景图、用户头像、昵称 -->
        <q-img class="absolute-top" src="../statics/mountains.jpeg" style="height: 150px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src="../statics/liushilu.jpg">
            </q-avatar>
            <div class="text-weight-bold">Liu shi lu</div>
            <div>@我是皮皮路</div>
          </div>
        </q-img>
    </q-drawer>

效果如下：

调整侧边菜单栏的背景图的高度，保持和右边背景图高度一样

打开浏览器的元素检查器，查看到Header区域的高度是192px，同理侧边抽屉菜单栏高度也调整为192px

<q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="200"
        :breakpoint="400"
      >
        <!-- 侧边栏菜单区域 -->
        <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
          <q-list padding>
           ...
          </q-list>
        </q-scroll-area>
				
				<!-- 侧边栏顶部背景图、用户头像、昵称 -->
        <!-- 侧边栏顶部高度192px -->
        <q-img class="absolute-top" src="../statics/mountains.jpeg" style="height: 192px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src="../statics/liushilu.jpg">
            </q-avatar>
            <div class="text-weight-bold">Liu shi lu</div>
            <div>@我是皮皮路</div>
          </div>
        </q-img>
    </q-drawer>

以上代码，需要讲一下的就是style="height: calc(100% - 192px) 它的意思是侧边栏菜单区域的高度始终比侧边栏的高度少192px，看示意图：

至于calc()的具体用法，可以参考：https://zhuanlan.zhihu.com/p/138308285

5.2、侧边栏菜单

调整侧边栏菜单，只保留两个菜单，菜单名称修改为todo和help，另外Quasar是基于material design设计规范的框架，因此对于material design的图标是直接输入名称就可以使用的。

material design的图标可以在这个网址搜索：https://fonts.google.com/icons

<!-- 侧边栏菜单区域 -->
  <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
    <q-list padding>
      <q-item clickable v-ripple>
        <!-- 只需要图标的名称，就可以使用material design的图标 -->
        <q-item-section avatar>
          <q-icon name="list" />
        </q-item-section>
        <!-- 菜单的名称 -->
        <q-item-section>
          Todo
        </q-item-section>
      </q-item>

      <q-item active clickable v-ripple>
        <q-item-section avatar>
          <q-icon name="help" />
        </q-item-section>

        <q-item-section>
          Help
        </q-item-section>
      </q-item>
    </q-list>
  </q-scroll-area>

既然有两个菜单，必然对应两个页面，因此我们需要新建Todo和Help两个页面。

src/pages/Todo.vue

直接将原有的index.vue修改为Todo.vue

<template>
  <q-page>
    <h5>Todo</h5>
  </q-page>
</template>

<script>
export default {
  
}
</script>

src/pages/Help.vue

<template>
  <q-page>
    <h5>Help</h5>
  </q-page>
</template>

<script>
export default {
  
}
</script>

简单的页面建好之后，开始修改页面跳转的路由

src/router/routes.js

const routes = [
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [
      { path: "", component: () => import("pages/Todo.vue") },
      { path: "/help", component: () => import("pages/Help.vue") }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: "*",
    component: () => import("pages/Error404.vue")
  }
];

export default routes

侧边栏菜单添加路由路径的属性

to="/" 指向页面路由

exact 当前点击的菜单项

<!-- 侧边栏菜单区域 -->
  <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
    <q-list padding>
      <q-item
        to="/"
        exact
        clickable
        v-ripple>
        <!-- 只需要图标的名称，就可以使用material design的图标 -->
        <q-item-section avatar>
          <q-icon name="list" />
        </q-item-section>
        <!-- 菜单的名称 -->
        <q-item-section>
          Todo
        </q-item-section>
      </q-item>

      <q-item
        to="/help"
        exact
        clickable
        v-ripple>
        <q-item-section avatar>
          <q-icon name="help" />
        </q-item-section>

        <q-item-section>
          Help
        </q-item-section>
      </q-item>
    </q-list>
  </q-scroll-area>

好啦，现在就可以实现点击侧边栏菜单实现页面的跳转啦～～

最后目前 src/layouts/MainLayout.vue 完整的代码如下：

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <!-- 取消掉项目默认的app名称和Quasar的版本号-->
        <!-- <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div> -->
      </q-toolbar>

        <div class="q-px-lg q-pt-xl q-mb-md">
          <div class="text-h3">Todo</div>
          <div class="text-subtitle1">{{ todaysDate }}</div>
        </div>
        <!-- 工具栏背景图 -->
        <q-img
          src="../statics/mountains.jpeg"
          class="header-image absolute-top"/>

    </q-header>

    <!-- 侧边抽屉菜单栏 -->
    <!-- 将v-model的默认值drawer修改为leftDrawerOpen -->
    <q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="250"
        :breakpoint="600"
      >
        <!-- 侧边栏菜单区域 -->
        <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
          <q-list padding>
            <q-item
              to="/"
              exact
              clickable
              v-ripple>
              <!-- 只需要图标的名称，就可以使用material design的图标 -->
              <q-item-section avatar>
                <q-icon name="list" />
              </q-item-section>
              <!-- 菜单的名称 -->
              <q-item-section>
                Todo
              </q-item-section>
            </q-item>

            <q-item
              to="/help"
              exact
              clickable
              v-ripple>
              <q-item-section avatar>
                <q-icon name="help" />
              </q-item-section>

              <q-item-section>
                Help
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
        <!-- 侧边栏顶部背景图、用户头像、昵称 -->
        <!-- 侧边栏顶部高度192px -->
        <q-img class="absolute-top" src="../statics/mountains.jpeg" style="height: 192px">
          <div class="absolute-bottom bg-transparent">
            <!-- 用户头像 -->
            <q-avatar size="56px" class="q-mb-sm">
              <img src="../statics/liushilu.jpg">
            </q-avatar>
            <div class="text-weight-bold">liushilu</div>
            <div>@我是皮皮路</div>
          </div>
        </q-img>
    </q-drawer>

    <q-page-container>
      <!-- keep-alive 所有路径下的视图组件都会被缓存 -->
      <keep-alive>
        <router-view />
      </keep-alive>
    </q-page-container>
  </q-layout>
</template>

<script>
// 导入date函数
import {date} from 'quasar'

export default {
  name: 'MainLayout',
  data () {
    return {
      leftDrawerOpen: false,
    }
  },
  // 计算属性
  computed: {
    todaysDate() {
      // 当前时间的时间戳
      let timeStamp = Date.now()
      // 返回格式化的时间
      return date.formatDate(timeStamp, 'dddd D MMMM')
    }
  }
}
</script>

<style lang="scss">
  .header-image {
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    filter: grayscale(100%);
  }
</style>
```<p style="line-height: 20px; color: #ccc">
        版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
        作者: 莫如渐
        原文链接：<a href='https://juejin.im/post/6960223873841250318'>https://juejin.im/post/6960223873841250318</a>
      </p>