一. 头像 v-avatar

v-avatar 组件通常用于显示循环用户个人资料图片。 此组件将允许您动态尺寸并添加响应图像、图标和文字的边框半径。

<v-avatar color="red"> XB </v-avatar>

1. 头像的样式

(1). 默认圆形

(2). 圆角矩形 rounded

<v-avatar color="red" rounded> XB </v-avatar>

(3). 瓦片 tile

<v-avatar color="red" tile > XB </v-avatar>

2. 头像的大小 size

<v-avatar color="green" size="36"> XB </v-avatar>

size="avatarSize"

3. 图片头像/图标头像

    <v-avatar  color="red">
      <img src="~assets/head.jpg" alt="alt" />
    </v-avatar>
    <v-avatar  color="red">
      <v-icon dark>mdi-heart</v-icon>
    </v-avatar>

4. 和其他控件组合

    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn fab color="primary" dark v-on="on">
          <v-avatar color="red">
            <img src="~assets/head.jpg" alt="alt" /> </v-avatar
        ></v-btn>
      </template>
      <v-list>
        <v-list-item v-for="item in items" :key="item.key">
          {{ item.key }}
        </v-list-item>
      </v-list>
    </v-menu>

二. 扩展面板 v-expansion-panel

v-expansion-panel 组件有助于减少大量信息的垂直空间占用。 组件的默认功能是仅显示一个扩展面板； 然而，使用 multiple 属性后，扩展面板可以保持打开，直到显式地关闭。

1. 扩展面板相关组件

(1). 扩展面板 v-expansion-panels

(2). 单个扩展面板 v-expansion-panel

(3). 扩展面板标头 v-expansion-panel-header

(4). 扩展面板内容 v-expansion-panel-content

2. 典型应用

<template>
  <v-container grid-list-xs>
    <v-expansion-panels>
      <v-expansion-panel
        v-for="item in items"
        :key="item.key"
        :class="item.color"
        class="white--text"
      >
        <v-expansion-panel-header> {{ item.name }} </v-expansion-panel-header>
        <v-expansion-panel-content>
          {{ item.desc }}
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      items: [
        {
          key: "Protoss",
          name: "神族",
          desc: "英文原文为Protoss，他们和虫族有共同的创造者“赛而那加人（Xel'Naga）”，他们的母星在艾尔（Aiur）。神族被创造为纯精神、纯能量的生灵，因此被译为神族，神族的文明高度发达。",
          color: "amber",
        },
        {
          key: "Zerg",
          name: "虫族",
          desc: "英文原文为Zerg，虫族的智慧、意志、权力都集中在一个共同的领导者－－主宰（Overmind），主宰是所有虫族思想的起源。 虫族的中心驱动力，就是不断的侵略与同化其他种族他们吸收其他种生物DNA的优点，而去除其缺点，因此虫族的生命体常常具有生物学上的完美性；他们繁衍迅速、需要的资源也极少。",
          color: "purple",
        },
        {
          key: "Terran",
          name: "人族",
          desc: "英文原文为Terran，也就是来自于地球人以及地球人在太空其他星球的殖民地。人族是被地球放逐的罪犯，他们搭乘四艘巨大的移民太空船来到宇宙的另一端，这也就是说他们不是道地的“地球人”。",
          color: "blue",
        },
      ],
    };
  },
};
</script>

3. 扩展面板的样式

(1). 手风琴 accordion

accordion 属性激活时，当前扩展面板周围不会有边距。

    <v-expansion-panels accordion>
      <v-expansion-panel
        v-for="item in items"
        :key="item.key"
        :class="item.color"
        class="white--text"
      >
        <v-expansion-panel-header> {{ item.name }} </v-expansion-panel-header>
        <v-expansion-panel-content>
          {{ item.desc }}
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>

(2). 缩进 inset

inset 属性激活时，当前扩张面板变得更小。

<v-expansion-panels inset >

(3). 弹出 popout

<v-expansion-panels popout >

4. 多开 multiple

<v-expansion-panels multiple>

5. v-model控制开合

<v-expansion-panels multiple v-model="show">
...
show: [0,2],

6. 自定义下拉图标

    <v-expansion-panels >
      <v-expansion-panel
        v-for="item in items"
        :key="item.key"
        :class="item.color"
        class="white--text"
      >
        <v-expansion-panel-header>
          {{ item.name }}
          <template v-slot:actions>
            <v-icon color="white"> mdi-check </v-icon>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          {{ item.desc }}
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>

可以看到, 上面的图标自动翻转了, 这很方便, 但有时我们不需要

去除下拉图标反转

我们只需要将v-expansion-panel-header 中添加disable-icon-rotate属性即可

<v-expansion-panel-header disable-icon-rotate>

三. 消息条 v-snackbar

v-snackbar 组件用于向用户显示快速消息。 Snackbars 支持定位、移除延迟和回调。

1. 最简单的消息条

<template>
  <v-container grid-list-xs>
    <v-btn color="success" @click="show_snackbar = true">text</v-btn>
    <v-snackbar v-model="show_snackbar"> 这是一个通知消息! </v-snackbar>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      show_snackbar: false,
    };
  },
};
</script>

2. 可关闭消息条

我们把按钮放在action插槽中, 以实现关闭功能

<template>
  <v-container grid-list-xs>
    <v-btn color="success" @click="show_snackbar = true">text</v-btn>
    <v-snackbar v-model="show_snackbar">
      这是一个可关闭的通知消息 !
      <template v-slot:action="{ attrs }">
        <v-btn dark text v-bind="attrs" @click="show_snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      show_snackbar: false,
    };
  },
};
</script>

3. 消息条的样式

(1). 轮廓线样式 outlined

(1). 文本样式 text

(3). shaped样式

(4). 药丸样式 rounded

<v-snackbar v-model="show_snackbar" rounded="pill">

(5). 多行消息条 multi-line

multi-line 属性扩展了 v-snackbar 的高度，让您有更多的内容空间。

4. 消息条自动超时 timeout

timeout 属性自定义 v-snackbar 自动隐藏的延迟。单位ms

<v-snackbar v-model="show_snackbar" timeout="1000">

timeout设置为 -1可以永不关闭

四. 评分

1. 简单的评分

<v-rating></v-rating>

2. 绑定数据

<template>
  <v-container grid-list-xs class="text-center">
    {{rating}}
    <v-rating half-increments v-model="rating"></v-rating>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      rating: 3,
    };
  },
};
</script>

3. 评分的颜色/背景颜色 color/background-color

<v-rating color="amber" background-color="pink"></v-rating>

4. 悬停 hover

<v-rating hover></v-rating>

5. 半星 half-increments

<v-rating half-increments></v-rating>

6. 只读 readonly

<v-rating readonly></v-rating>

7. 评分的图标 empty-icon/full-icon/half-icon

    <v-rating
      empty-icon="mdi-shield-outline"
      full-icon="mdi-shield"
      half-icon="mdi-shield-half-full"
      half-increments
    ></v-rating>

评分图标其实可以随意设定, 但个人感觉,只有成套的才有意义, 下面列举最有意义的material Design图标

(1). 空图标 empty-icon

• mdi-circle-outline
• mdi-heart-outline
• mdi-shield-outline
• mdi-star-outline

(2). 半星图标 half-icon

• mdi-circle-half-full
• mdi-heart-half-full
• mdi-shield-half-full
• mdi-star-half-full

(3). 满图标 full-icon

• mdi-circle
• mdi-heart
• mdi-shield
• mdi-star

8. 图标大小 size

• small
• large
• x-large
• size="64"

9. 星星的多少 length

<v-rating length=10 v-model="rating"></v-rating>