Material Design风格神框架vuetify 学习笔记(七) 基础组件3 抽屉 卡片

一. 导航抽屉 v-navigation-drawer

v-navigation-drawer 是用户用于导航应用程序的组件。
导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。 在应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。

1. 抽屉的显示和隐藏 v-model绑定

要控制抽屉的显示和隐藏, 我们使用 v-model 来绑定一个标志位参数 

<template>
  <div class="home">
    <v-toolbar dense dark light>
      <v-app-bar-nav-icon @click="show_flag = !show_flag "></v-app-bar-nav-icon>
    </v-toolbar>
    <v-navigation-drawer app color="indigo white--text" v-model="show_flag">
      hello
    </v-navigation-drawer>
</template>
<script>
export default {
  data() {
    return {
      show_flag: false,
</script>

(1). app化动态调整


组件作为应用程序布局的一部分。用于动态调整内容的大小。


<v-navigation-drawer app color="indigo white--text" v-model="show_flag">
      hello
    </v-navigation-drawer>

值得注意的是, 它是会根据设备宽度(设备类型)自动调整行为的


(2). 折叠式 clipped


    <v-navigation-drawer clipped color="indigo white--text" v-model="show_flag">
      hello
    </v-navigation-drawer>

(4). 修改遮罩蒙版 overlay-color/overlay-opacity


我们可以使用overlay-color更改遮罩颜色

使用overlay-opacity更改遮罩透明度


    <v-navigation-drawer
      overlay-color = "indigo"
      overlay-opacity = "0.5"
      v-model="show_flag">
  <div class="home">
    <v-toolbar dense dark light>
      <v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon>
    </v-toolbar>
    <v-navigation-drawer 
    v-model="show_flag" 
    expand-on-hover
    mini-variant-width="64"
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="deep-purple--text text--accent-4"
          <v-list-item>
            <v-list-item-avatar>
              <img src="~assets/head.jpg" alt="alt" />
            </v-list-item-avatar>
            <v-list-item-title>熊爸天下</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-qqchat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>QQ:xxxxxx</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-wechat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>微信:xxxxxxx</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Email:xxxx@xxx.com</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
</template>
<script>
export default {
  data() {
    return {
      show_flag: false,
      group: null,
</script>

(9). 底部弹出 bottom


底部弹出只有在在移动设备上从屏幕底部展开(只能遇到 mobile-breakpoint 时激活), 有没有app属性也会影响其行为


<v-navigation-drawer bottom v-model="show_flag" >
<v-navigation-drawer bottom v-model="show_flag" app>
  <div class="home">
    <v-toolbar dense dark light>
      <v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon>
    </v-toolbar>
    <v-navigation-drawer
      mini-variant-width="64"
      permanent
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="deep-purple--text text--accent-4"
          <v-list-item>
            <v-list-item-avatar>
              <img src="~assets/head.jpg" alt="alt" />
            </v-list-item-avatar>
            <v-list-item-title>熊爸天下</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-qqchat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>QQ:xxxxxx</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-wechat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>微信:xxxxxxx</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Email:xxxx@xxx.com</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
      <template v-slot:append>
        <div class="pa-2">
          <v-btn block color="error"> 注销 </v-btn>
      </template>
    </v-navigation-drawer>
</template>
<script>
export default {
  data() {
    return {
      show_flag: false,
      group: null,
</script>

二. 卡片组件


1. 卡片相关组件


(1). 卡片 v-card


(2). 卡片标题 v-card-title


(3). 卡片副标题 v-card-subtitle


(4). 卡片文本 v-card-text


(5). 卡片动作 v-card-actions


用于为卡片放置 动作 的容器


    <v-card outlined>
      <v-card-title primary-title>
        <v-avatar size="36">
          <img src="~assets/head.jpg" alt="alt" />
        </v-avatar>
        <span class="ml-2">熊爸天下</span>
      </v-card-title>
      <v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle>
      <v-card-text>
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      </v-card-text>
    </v-card>
        <span class="ml-2">熊爸天下</span>
      </v-card-title>
      <v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle>
      <v-card-text>
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      </v-card-text>
      <v-card-actions>
        <v-btn text color="success" @click="reveal = !reveal">详情</v-btn>
        <v-btn text color="error">取消</v-btn>
      </v-card-actions>
      <!-- 初始隐藏的扩展卡片 -->
      <v-expand-transition>
        <v-card
          v-show="reveal"
          <v-card-text>
            <v-card-title>人类起源</v-card-title>
              阿努纳奇（Anunnaki）来自太阳系一个拥有椭圆轨道的行星，这个行星被称为“尼比鲁”，它的轨道周期为3600个地球年。
              在苏美尔，阿卡德，亚述以及巴比伦文明中，阿努纳奇人是创造人类的众神。
          </v-card-text>
          <v-card-actions>
            <v-btn text color="success" @click="reveal = false"> 关闭 </v-btn>
          </v-card-actions>
        </v-card>
      </v-expand-transition>
    </v-card>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      reveal: false,
</script>

配合css实现详情卡

        <span class="ml-2">熊爸天下</span>
      </v-card-title>
      <v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle>
      <v-card-text>
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      </v-card-text>
      <v-card-actions>
        <v-btn text color="success" @click="reveal = true">详情</v-btn>
        <v-btn text color="error">取消</v-btn>
      </v-card-actions>
      <!-- 初始隐藏的扩展卡片 -->
      <v-expand-transition>
        <v-card
          v-if="reveal"
          class="transition-fast-in-fast-out v-card--reveal"
          style="height: 100%"
          <v-card-text class="pb-0">
            <v-card-title>人类起源</v-card-title>
              阿努纳奇（Anunnaki）来自太阳系一个拥有椭圆轨道的行星，这个行星被称为“尼比鲁”，它的轨道周期为3600个地球年。
              在苏美尔，阿卡德，亚述以及巴比伦文明中，阿努纳奇人是创造人类的众神。
          </v-card-text>
          <v-card-actions class="pt-0">
            <v-btn text color="success" @click="reveal = false"> 关闭 </v-btn>
          </v-card-actions>
        </v-card>
      </v-expand-transition>
    </v-card>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      reveal: false,
</script>
<style>
.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;