Material Design风格神框架vuetify 学习笔记
2021-08-27 本文已影响0人
熊爸天下_56c7
一. 图像 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>
