Material Design风格神框架vuetify 学习笔记
2021-09-22 本文已影响0人
熊爸天下_56c7
一. 轮播
1. 最基本的轮播
v-carousel 组件用于在循环计时器上显示大量可视内容。
<v-carousel>
<v-carousel-item src="~assets/pic1.jpg"> </v-carousel-item>
<v-carousel-item src="~assets/pic2.jpg"> </v-carousel-item>
<v-carousel-item src="~assets/pic3.jpg"> </v-carousel-item>
<v-carousel-item src="~assets/pic4.jpg"> </v-carousel-item>
</v-carousel>
我们可以看到, 图片不会轮播,需要手动点击
2. 自动轮播 cycle
(1). 自动轮播
我们可以通过cycle属性使其自动轮播
<v-carousel cycle>
(2). 轮播时间间隔 interval
默认轮播间隔6s. 我们可以通过interval设置其轮播间隔
<v-carousel cycle interval='1000'>
(3). 轮播是否连续? continuous
我们可以通过continuous设置其轮播是否是连续执行
默认true(连续执行),
也可以设置为false,这样第一次轮播轮播到最后一张图就会停止
<v-carousel cycle interval='1000' :continuous="false">
(4). 轮播是否连续? continuous
我们可以通过interval设置其轮播间隔
<v-carousel cycle interval='1000'>
我们可以通过interval设置其轮播间隔
<v-carousel cycle interval='1000'>
3. 轮播图反向进入 reverse
正常情况下, 我们的轮播图从右侧划入, 如果设置了 reverse 属性, 轮播图就会从左侧划入
<v-carousel cycle interval='2000' reverse>
4. 显示/隐藏 下一个/前一个 导航的箭头show-arrows
<v-carousel cycle interval='2000' :show-arrows="false">
5. hover才显示 下一个/前一个 导航的箭头show-arrows-on-hover
<v-carousel cycle interval='2000' show-arrows-on-hover>
6. 垂直轮播 vertical
<v-carousel cycle interval='2000' vertical>
诡异的是, 这种状态下, 轮播工具栏还是水平轮播的
7. 垂直工具栏 vertical-delimiters
如果需要垂直工具栏, 则使用vertical-delimiters, 垂直工具栏也可以用在水平轮播中
<v-carousel cycle interval='2000' vertical vertical-delimiters>
8. 过渡动画 transition
<v-carousel cycle interval='2000'>
<v-carousel-item src="~assets/pic1.jpg" transition="fade-transition"> </v-carousel-item>
<v-carousel-item src="~assets/pic2.jpg" transition="fade-transition"> </v-carousel-item>
<v-carousel-item src="~assets/pic3.jpg" transition="fade-transition"> </v-carousel-item>
<v-carousel-item src="~assets/pic4.jpg" transition="fade-transition"> </v-carousel-item>
</v-carousel>
9. 轮播分隔符样式 delimiter-icon
<v-carousel cycle interval='2000' delimiter-icon="mdi-minus">
10. 隐藏轮播分隔符背景颜色 hide-delimiter-background
<v-carousel cycle interval='2000' hide-delimiter-background>
11. 隐藏轮播分隔符 hide-delimiters
<v-carousel cycle interval="2000" hide-delimiters>
12. 自定义箭头 v-slot:prev/v-slot:next
我们可以使用 v-slot:prev和v-slot:next
<v-carousel cycle interval="2000">
<template v-slot:prev="{ on, attrs }">
<v-btn text fab v-bind="attrs" v-on="on">上一页</v-btn>
</template>
<template v-slot:next="{ on, attrs }">
<v-btn text fab v-bind="attrs" v-on="on">下一页</v-btn>
</template>
<v-carousel-item src="~assets/pic1.jpg" transition="fade-transition">
</v-carousel-item>
<v-carousel-item src="~assets/pic2.jpg" transition="fade-transition">
</v-carousel-item>
<v-carousel-item src="~assets/pic3.jpg" transition="fade-transition">
</v-carousel-item>
<v-carousel-item src="~assets/pic4.jpg" transition="fade-transition">
</v-carousel-item>
</v-carousel>
13. 控制显示某一幅 v-model
我们可以使用v-model来指定我们显示哪一张,
value从0开始计
<template>
<div>
<br />
<v-carousel v-model="show_index">
<v-carousel-item src="~assets/pic0.jpg" transition="fade-transition">
</v-carousel-item>
<v-carousel-item src="~assets/pic1.jpg" transition="fade-transition">
</v-carousel-item>
<v-carousel-item src="~assets/pic2.jpg" transition="fade-transition">
</v-carousel-item>
<v-carousel-item src="~assets/pic3.jpg" transition="fade-transition">
</v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data() {
return { show_index: 1 };
},
};
</script>
14. 使用轮播图
灵活使用轮播图, 我们甚至能创造一个步骤控件, 因为步骤条也好, 轮播图也好, 他们都基于 v-window组件
<template>
<div>
<br />
<v-card class="mx-auto" max-width="500" color="#ddd">
<v-card-title class="text-h5 font-weight-regular justify-space-between">
<span>{{ current_title }}</span>
<v-avatar
color="primary lighten-2"
class="subheading white--text"
size="30"
v-text="step"
></v-avatar>
</v-card-title>
<v-carousel
v-model="step"
:show-arrows="false"
hide-delimiters
transition="fade-transition"
>
<v-carousel-item :value="1" transition="fade-transition">
<v-card-text>
<v-text-field
label="用户名"
placeholder="请输入用户名"
></v-text-field>
<v-text-field label="请输入当前密码" type="password"></v-text-field>
<span class="text-caption grey--text text--darken-1">
如果忘记密码,请点击:
</span>
<a class="text-caption" href="">忘记密码</a>
</v-card-text>
</v-carousel-item>
<v-carousel-item :value="2" transition="fade-transition">
<v-card-text>
<v-text-field label="请输入新密码" type="password"></v-text-field>
<v-text-field
label="请再次输入新密码"
type="password"
></v-text-field>
</v-card-text>
</v-carousel-item>
<v-carousel-item :value="3" transition="fade-transition">
<div class="pa-4 text-center">
<v-avatar size="100" color="success" class="mb-5">
<v-icon size="80" dark>mdi-check</v-icon>
</v-avatar>
<h3 class="text-h6 font-weight-light mb-2">密码修改成功!</h3>
<span class="text-caption grey--text">请您牢记新密码!</span>
</div>
</v-carousel-item>
</v-carousel>
<v-card-actions>
<v-btn color="error" :disabled="step === 1" text @click="step--">
返回
</v-btn>
<v-spacer></v-spacer>
<v-btn :disabled="step === 3" color="primary" depressed @click="step++">
下一步
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
data() {
return { step: 1, current_title: "第一步: 请输入现在的密码" };
},
watch: {
step(v) {
switch (v) {
case 1:
this.current_title = "第一步: 请输入现在的密码";
break;
case 2:
this.current_title = "第二步: 请输入新密码";
break;
case 3:
this.current_title = "第三步: 完成";
break;
default:
break;
}
},
},
};
</script>
二. 蒙版 v-overlay
v-overlay 组件用于强调特定元素或它的一部分。 它向用户发出应用程序内状态变化的信号，可用于创建加载器、对话框等。
<template>
<div class="ma-4">
<v-btn color="success" @click="open_overlay">text</v-btn>
<v-overlay :value="overlay_flag"></v-overlay>
</div>
</template>
<script>
export default {
data() {
return { overlay_flag: false };
},
methods: {
open_overlay() {
this.overlay_flag= true
setTimeout(() => {
this.overlay_flag= false;
}, 3000);
}
},
};
</script>
2. 透明度
<v-overlay opacity="0.8" :value="overlay_flag"></v-overlay>
3. 遮罩中的按钮
<template>
<div class="ma-4">
<v-btn color="success" @click="overlay_flag = true">text</v-btn>
<v-overlay opacity="0.8" :value="overlay_flag">
<v-btn color="info" @click="overlay_flag = false">hide</v-btn>
</v-overlay>
</div>
</template>
<script>
export default {
data() {
return { overlay_flag: false };
},
};
</script>
4. 遮罩加载动画
<template>
<div class="ma-4">
<v-btn color="success" @click="open_overlay">text</v-btn>
<v-overlay :value="overlay_flag"
><v-progress-circular indeterminate size="64"></v-progress-circular
></v-overlay>
</div>
</template>
<script>
export default {
data() {
return { overlay_flag: false };
},
methods: {
open_overlay() {
this.overlay_flag = true;
setTimeout(() => {
this.overlay_flag = false;
}, 3000);
},
},
};
</script>
