一. 头像 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-panelv-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-panelv-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-panelv-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-ratingempty-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>