一. 轮播

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>