Material Design风格神框架vuetify 学习笔记(九) 基础组件5 图片 进度环 进度条

一. 图像 v-img

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

1. 天生自适应

与不同的是天生自适应

2. 最大宽度/高度

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

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

(1). 单设置宽度

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

(2). 单设置高度

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

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

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

3. 不会裁切 contain

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

4. 宽高比 aspect-ratio

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

5. 渐变蒙版 gradient

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

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

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

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

7. 占位符

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

8. 加载失败的处理

二. 进度环

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

1. 进度环

2. 进度环颜色 color

3. 加载环 indeterminate

4. 进度环起点 rotate

5. 进度条大小size

6. 进度条宽度 width

7. 进度条数字

    
      60%
    

8. 进度条动画

9. 关于进度条动画间隔

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

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

三. 进度条 v-progress-linear

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

1. 进度条

2. 缓冲值 buffer-value

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

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

4. 进度条大小 height

5. 进度条样式

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

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

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

(3). 圆角 rounded

(4). 条纹 striped

6. 流动

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

7. 标签中的数字

    
      40%
    

8. 工具栏