一. 頭像 v-avatar

v-avatar 組件通常用于顯示循環(huán)用戶個人資料圖片。 此組件將允許您動態(tài)尺寸并添加響應(yīng)圖像、圖標(biāo)和文字的邊框半徑丹锹。

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

1. 頭像的樣式

(1). 默認(rèn)圓形

(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. 圖片頭像/圖標(biāo)頭像

    <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 組件有助于減少大量信息的垂直空間占用漱抓。 組件的默認(rèn)功能是僅顯示一個擴展面板； 然而伪货，使用 multiple 屬性后，擴展面板可以保持打開钾怔，直到顯式地關(guān)閉碱呼。

1. 擴展面板相關(guān)組件

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

(2). 單個擴展面板 v-expansion-panel

(3). 擴展面板標(biāo)頭 v-expansion-panel-header

(4). 擴展面板內(nèi)容 v-expansion-panel-content

2. 典型應(yīng)用

<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，他們和蟲族有共同的創(chuàng)造者“賽而那加人（Xel'Naga）”宗侦，他們的母星在艾爾（Aiur）愚臀。神族被創(chuàng)造為純精神、純能量的生靈矾利，因此被譯為神族姑裂，神族的文明高度發(fā)達(dá)。",
          color: "amber",
        },
        {
          key: "Zerg",
          name: "蟲族",
          desc: "英文原文為Zerg男旗，蟲族的智慧舶斧、意志、權(quán)力都集中在一個共同的領(lǐng)導(dǎo)者－－主宰（Overmind）察皇，主宰是所有蟲族思想的起源捧毛。 蟲族的中心驅(qū)動力，就是不斷的侵略與同化其他種族他們吸收其他種生物DNA的優(yōu)點，而去除其缺點呀忧，因此蟲族的生命體常常具有生物學(xué)上的完美性师痕；他們繁衍迅速、需要的資源也極少而账。",
          color: "purple",
        },
        {
          key: "Terran",
          name: "人族",
          desc: "英文原文為Terran胰坟，也就是來自于地球人以及地球人在太空其他星球的殖民地。人族是被地球放逐的罪犯泞辐，他們搭乘四艘巨大的移民太空船來到宇宙的另一端笔横，這也就是說他們不是道地的“地球人”。",
          color: "blue",
        },
      ],
    };
  },
};
</script>

3. 擴展面板的樣式

(1). 手風(fēng)琴 accordion

accordion 屬性激活時咐吼，當(dāng)前擴展面板周圍不會有邊距吹缔。

    <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). 縮進(jìn) inset

inset 屬性激活時，當(dāng)前擴張面板變得更小锯茄。

<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. 自定義下拉圖標(biāo)

    <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>

可以看到, 上面的圖標(biāo)自動翻轉(zhuǎn)了, 這很方便, 但有時我們不需要

去除下拉圖標(biāo)反轉(zhuǎn)

我們只需要將v-expansion-panel-header 中添加disable-icon-rotate屬性即可

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

三. 消息條 v-snackbar

v-snackbar 組件用于向用戶顯示快速消息厢塘。 Snackbars 支持定位、移除延遲和回調(diào)肌幽。

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. 可關(guān)閉消息條

我們把按鈕放在action插槽中, 以實現(xiàn)關(guān)閉功能

<template>
  <v-container grid-list-xs>
    <v-btn color="success" @click="show_snackbar = true">text</v-btn>
    <v-snackbar v-model="show_snackbar">
      這是一個可關(guān)閉的通知消息 !
      <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 的高度晚碾，讓您有更多的內(nèi)容空間。

4. 消息條自動超時 timeout

timeout 屬性自定義 v-snackbar 自動隱藏的延遲喂急。單位ms

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

timeout設(shè)置為 -1可以永不關(guān)閉

四. 評分

1. 簡單的評分

<v-rating></v-rating>

2. 綁定數(shù)據(jù)

<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. 評分的圖標(biāo) 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>

評分圖標(biāo)其實可以隨意設(shè)定, 但個人感覺,只有成套的才有意義, 下面列舉最有意義的material Design圖標(biāo)

(1). 空圖標(biāo) empty-icon

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

(2). 半星圖標(biāo) half-icon

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

(3). 滿圖標(biāo) full-icon

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

8. 圖標(biāo)大小 size

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

9. 星星的多少 length

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