Material Design风格神框架vuetify 学习笔记(八) 基础组件4 头像扩展面板消息条评分...-CSDN博客

本文链接：https://blog.csdn.net/finedayforu/article/details/119948763

本文详细介绍了Vuetify框架中的Material Design组件，包括v-avatar头像的样式和大小调整，v-expansion-panel扩展面板的多种应用场景和自定义设置，v-snackbar消息条的样式和超时控制，以及评分组件的多种交互和图标定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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