一. 图像 v-img

v-img组件包含支持富媒体的功能。 结合 vuetify-loader, 你可以添加动态的渐进图像来提供更好的用户体验。

1. 天生自适应

与<img>不同的是<v-img>天生自适应

<v-img src="~/assets/bh.jpg"></v-img>

2. 最大宽度/高度

      max-height="200"
      max-width="900"

图片会尽力保证画面的比例和完整度

(1). 单设置宽度

单设置宽度会保证最大宽度, 窗口宽度小于最大宽度时, 根据宽度比例缩放, 窗口宽度大于最大宽度时, 首先保证宽度和比例

(2). 单设置高度

设置单高度会保证最大高度, 宽高比大于此高度时,

(3). 同时设置最大宽度/最大高度

同时设置最大宽高度会结合上面的行为

3. 不会裁切 contain

当比例与 宽高不符合时, 会留白以保证其完整性

<v-img src="~/assets/bh.jpg" width="400" height="400" contain></v-img>

<v-img src="~/assets/bh.jpg" width="400" height="100" contain></v-img>

4. 宽高比 aspect-ratio

我们设置了宽高比会自动裁切至适合的比例

<v-img src="~/assets/bh.jpg" :aspect-ratio="16 / 16" width="900"></v-img>

<v-img src="~/assets/bh.jpg" :aspect-ratio="8 / 16" width="900"></v-img>

<v-img src="~/assets/bh.jpg" :aspect-ratio="16 / 3" width="900"></v-img>

5. 渐变蒙版 gradient

渐变蒙版通过设置方向和RGBA

  <v-img
    src="~/assets/bh.jpg"
    gradient="to top right, rgba(255,255,0,0.1), rgba(0,255,255,0.9)"
  ></v-img>

6. 预览图/预加载图 lazy-src

在src没有加载出来之前, 先加载lazy-src, 通常是一个小型的base64编码的缩略图。有一个轻微的模糊滤镜应用。

  <v-img
    src="~/assets/bh.jpg"
    lazy-src="~/assets/bh.jpg"
    max-width="500"
    max-height="300"
  >
  </v-img>

我们还可以用transition属性规定
从 lazy-src 切换到 src 时要使用的过渡

  <v-img
    src="~/assets/bh.jpg"
    lazy-src="~/assets/bh.jpg"
    transition="scale-transition"
    max-width="500"
    max-height="300"
  >

7. 占位符

在主图加载之前, 我们可以使用占位符slot:placeholder占位,以等待加载

    <v-img
      src="https://badc/not/valid"
      lazy-src="~assets/bh.jpg"
      :aspect-ratio="16 / 9"
      width="900"
    >
      <template v-slot:placeholder>
        <v-row class="fill-height ma-0" align="center" justify="center">
          <v-progress-circular
            indeterminate
            color="grey lighten-5"
          ></v-progress-circular>
        </v-row>
      </template>
    </v-img>

8. 加载失败的处理

<template>
  <div>
    <v-img
      src="https://badc/not/valid"
      lazy-src="~assets/bh.jpg"
      :aspect-ratio="16 / 9"
      width="900"
      @error="imgLoadStatus = 'error'"
      v-if="imgLoadStatus != 'error'"
    >
      <template v-slot:placeholder>
        <v-row class="fill-height ma-0" align="center" justify="center">
          <v-progress-circular
            indeterminate
            color="grey lighten-5"
          ></v-progress-circular>
        </v-row>
      </template>
    </v-img>
    <v-img
      v-else
      src="~assets/not_found.jpg"
      :aspect-ratio="16 / 9"
      width="900"
    >
    </v-img>
  </div>
</template>


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

二. 进度环

v-progress-circular 组件用于向用户展示环形的数据。 它也可以设置为不确定的状态来表示加载。

1. 进度环

<v-progress-circular :value="80"></v-progress-circular>

2. 进度环颜色 color

<v-progress-circular color="purple" :value="60"></v-progress-circular>

3. 加载环 indeterminate

<v-progress-circular color="purple" indeterminate ></v-progress-circular>

4. 进度环起点 rotate

    <v-container grid-list-xs>
      <v-progress-circular class="mx-2" rotate="0" value="60" ></v-progress-circular>
      <v-progress-circular class="mx-2" rotate="90" value="60" ></v-progress-circular>
      <v-progress-circular class="mx-2" rotate="180" value="60" ></v-progress-circular>
      <v-progress-circular class="mx-2" rotate="270" value="60" ></v-progress-circular>
    </v-container>

5. 进度条大小size

<v-progress-circular size="200" value="60"> </v-progress-circular>

6. 进度条宽度 width

<v-progress-circular size="200" width ="40" value="60"> </v-progress-circular>

7. 进度条数字

    <v-progress-circular color="green" size="100" width="20" value="60">
      60%
    </v-progress-circular>

8. 进度条动画

<template>
  <v-container grid-list-xs>
    <v-progress-circular color="green" size="100" width="20" v-model="value">
      {{ value }}%
    </v-progress-circular>
  </v-container>
</template>



<script>
export default {
  data() {
    return {
      interval: {},
      value: 0,
    };
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  mounted() {
    this.interval = setInterval(() => {
      if (this.value === 100) {
        return (this.value = 0);
      }
      this.value += 10;
    }, 1000);
  },
};
</script>

9. 关于进度条动画间隔

经我测试, 进度条动画需要时间, 如果变化速度太快会触发意想不到的BUG, 最好不要低于500ms

把上面的程序修改到200ms, 由于定时器间隔内完不成动画, 会出现异常

三. 进度条 v-progress-linear

v-progress-linear 组件用于直观地将数据展示给用户。 它们也可以表示一个不确定的数量，代表加载或处理中状态。

1. 进度条

<v-progress-linear value="15"></v-progress-linear>

2. 缓冲值 buffer-value

就像播放器一样, 既有播放条,又有缓冲条

<v-progress-linear value="20" buffer-value="60"></v-progress-linear>

3. 加载条 / 加载条反转 indeterminate / reverse

  <v-container grid-list-xs>
    <v-progress-linear
      color="green"
      background-color="lime"
      indeterminate
    ></v-progress-linear>
    <br />
    <v-progress-linear
      color="green"
      background-color="lime"
      indeterminate
      reverse
    ></v-progress-linear>
  </v-container>

4. 进度条大小 height

<v-progress-linear value="70" height="30"></v-progress-linear>

5. 进度条样式

(1). 颜色/背景颜色 color/background-color

使用 color 和 background-color 属性设置颜色

    <v-progress-linear
      value="20"
      color="green"
      background-color="lime"
    ></v-progress-linear>

(2). 背景颜色透明度 background-opacity

    <v-progress-linear
      value="20"
      color="green"
      background-color="lime"
      background-opacity="0.3"
    ></v-progress-linear>

(3). 圆角 rounded

    <v-progress-linear
      value="20"
      height="30"
      rounded
    ></v-progress-linear>

(4). 条纹 striped

<v-progress-linear value="60" height="30" striped></v-progress-linear>

6. 流动

stream 属性可以使用 buffer-value 向用户表示正在进行一些操作。 您可以使用 buffer-value 和 value 的任何组合来实现您的设计。

<v-progress-linear buffer-value="60" height="10" stream></v-progress-linear>

7. 标签中的数字

    <v-progress-linear value="40" height="30">
      <strong>40%</strong>
    </v-progress-linear>

8. 工具栏

<template>
  <v-container grid-list-xs>
    <v-toolbar dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>意大利</v-toolbar-title>
      <v-progress-linear
        :active="load_flag"
        indeterminate
        absolute
        bottom
        height="7"
        color="red"
        background-color="darkblue"
      ></v-progress-linear>
      <v-spacer></v-spacer>
      <v-btn text color="white" @click="load_flag = true">
        <v-icon>mdi-autorenew</v-icon>
      </v-btn>
      <v-toolbar-items>
        <v-progress-linear value="20"></v-progress-linear>
      </v-toolbar-items>
    </v-toolbar>
  </v-container>
</template>

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