一. 窗口 v-window

v-window 被设计成可以轻松地循环浏览内容，它提供了一个简单的接口来创建真正的自定义实现。

v-window组件提供了将内容从一个窗格过渡到另一个窗格的基础功能。 其他组件如v-tabs、v-carousel和v-stepper使用此组件作为其核心。

1. 基本窗口😂😂😂

<template>
  <div class="pa-6">
    <v-window v-model="show_flag">
      <v-window-item v-for="n in 4" :key="n">
        <v-card color="grey" height="200">
          <v-row class="fill-height" align="center" justify="center">
            <h1 style="font-size: 5rem" class="white--text">Slide{{ n }}</h1>
          </v-row>
        </v-card>
      </v-window-item>
    </v-window>
    <v-container grid-list-xs>
      <v-row>
        <v-btn dark @click="show_flag--">←</v-btn>
        <v-spacer></v-spacer>
        <v-btn dark @click="show_flag++">→</v-btn>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return { show_flag: 0 };
  },
};
</script>

2. 反转划入 reverse

<v-window reverse v-model="show_flag">

3. 垂直 vertical

<v-window vertical v-model="show_flag">

综合: 一个简单案例

<template>
  <div class="pa-6">
    <v-container grid-list-xs>
      <v-row>
        <v-btn
          dark
          color="#830c07"
          @click="show_flag--"
          :disabled="show_flag == 0 ? true : false"
          >上一幕</v-btn
        >
        <v-spacer></v-spacer>
        <v-btn
          dark
          color="#830c07"
          @click="show_flag++"
          :disabled="show_flag == 4 ? true : false"
          >下一幕</v-btn
        >
      </v-row>
    </v-container>
    <v-window class="elevation-1" v-model="show_flag">
      <v-window-item>
        <v-card class="cardcontent">
          <v-card-title primary-title> 第一幕 </v-card-title>
          <v-card-text>
            <p>
              帕琉斯打算要毁灭地球，但是受到了老泰的阻止，双方展开战斗，帕琉斯失败了，老泰为了表示自己公正，和天使决裂，自己亲自摘下了自己的翅膀要和凡人一起，在摘下翅膀的那一刻，地板就裂开了，他瞬间变成了流星落了下来，自己变成一个黑光头，把他从地下救了出来。
            </p>
          </v-card-text>
        </v-card>
      </v-window-item>
      <v-window-item>
        <v-card class="cardcontent">
          <v-card-title primary-title> 第二幕 </v-card-title>
          <v-card-text>
            <p>
              谎言之王霸占了贝利尔的国家，从前赫拉迪林有一个叛逆法师在封印巴尔的时候，把灵魂之石弄碎了，迫害塔尔拉夏要献身，这个叛逆法师就抢走了灵魂石碎片之后，自己弄出了黑色灵魂石，之后主角通过战斗消灭了他，之后通过战斗又赢了贝利尔，黑色灵魂石就吸取了贝利尔的灵魂，莉亚她的妈妈就加入了队伍与大家一起上路。
            </p>
          </v-card-text>
        </v-card>
      </v-window-item>
      <v-window-item>
        <v-card class="cardcontent">
          <v-card-title primary-title> 第三幕 </v-card-title>
          <v-card-text>
            <p>
              阿兹莫丹在发现有人制造出黑色灵魂石时，自己就想集齐七恶首的力量。因为利亚和他有血肉关系。阿兹莫丹于是直接托梦给莉亚告诉他，他对于这些做法非常的不满意，要挥动大军去夺回黑色灵魂石，希望自己可以为王，老泰和玩家一起加入战斗，阿兹莫丹重伤不治，黑色灵魂石吸收了阿兹莫丹之后就集齐了七恶首的力量，巴尔，孟菲斯托，督瑞尔，安德瑞尔，贝利尔和阿兹莫丹7恶首的灵魂，最后莉亚的母亲自己私自拿走了灵魂石把这些力量全部给了莉亚。
            </p>
          </v-card-text>
        </v-card>
      </v-window-item>
      <v-window-item>
        <v-card class="cardcontent">
          <v-card-title primary-title> 第四幕 </v-card-title>
          <v-card-text>
            <p>
              利亚就跑去了天堂，看守在在钻石之门前的怪物召唤了索拉力昂要与他挑战，烧尽了莉亚的肉身，在火中莉亚完成了变身，集合了7恶首力量的他战胜了索拉力昂，并砍断了他的长矛捅穿了他的身体，一口狮吼功把看守者因派留斯吹到钻石之门上，钻石之门就此倒塌压住因派留斯，英勇天使生死不明，莉亚自己进入了天堂，就在这个时候老泰带领玩家赶到，勇士！去战斗吧！打败他，你就是这个世界的英雄，战胜他，完成任务。
            </p>
          </v-card-text>
        </v-card>
      </v-window-item>
      <v-window-item>
        <v-card class="cardcontent">
          <v-card-title primary-title> 第五幕 </v-card-title>
          <v-card-text>
            <p>敬请期待</p>
          </v-card-text>
        </v-card>
      </v-window-item>
    </v-window>
  </div>
</template>

<script>
export default {
  data() {
    return { show_flag: 0 };
  },
};
</script>
<style>
.cardcontent {
  background-image: url("~assets/bg3.jpg");
  background-size: 100% 100%;
  background-attachment: fixed;
}
</style>

其实v-window有插槽: v-slot:prev="{ on, attrs }"和 v-slot:next="{ on, attrs }", 可以控制

二. 纸 v-sheet

v-sheet 组件是一块可改变的一张纸，为Vuetify 的功能提供了基础。
v-sheet 组件是许多组件的基础，如 v-card, v-toolbar等等。 可用属性是Material Design的基础 - 纸和立面（阴影）的概念。

1. 基本应用

基本的属性包括 宽 高 阴影 颜色等

<v-sheet elevation="5" height="100" width="100"></v-sheet>

2. 纸的样式

(1). 圆角纸 rounded

<v-sheet elevation="5" height="100" width="100" rounded></v-sheet>

(2). shaped样式 shaped

<v-sheet elevation="5" height="100" width="100" shaped></v-sheet>

三. 幻灯片组 v-slide-group

v-slide-group 组件用于显示伪分页信息 它以 v-item-group 为核心，为 v-tabs 和 v-chip-group 等组件提供基础。

类似于 v-window组件，v-slide-group允许项目根据需要占用尽可能多的空间，允许用户在提供的信息中水平移动。

1. 基本的幻灯片组

    <v-slide-group show-arrows>
      <v-slide-item v-for="n in 25" :key="n" >
        <v-btn
          class="blue white--text"
          depressed
          rounded
        >
          选项 {{ n }}
        </v-btn>
      </v-slide-item>
    </v-slide-group>

2. 激活其中某个项目

<v-slide-group show-arrows>
      <v-slide-item v-for="n in 25" :key="n" v-slot="{ active, toggle }">
        <v-btn
          :input-value="active"
          active-class="purple white--text"
          depressed
          rounded
          @click="toggle"
        >
          选项 {{ n }}
        </v-btn>
      </v-slide-item>
    </v-slide-group>

3. 激活项居中 center-active

<v-slide-group show-arrows center-active>

4. 自定义分隔符 prev-icon/next-icon

<v-slide-group
      center-active
      show-arrows
      prev-icon="mdi-minus"
      next-icon="mdi-plus"
    >

5. 必选 mandatory

mandatory 项目将使幻灯片组需要至少选择一个项目。

6. 多选 multiple

可以通过设置 multiple 属性来选择多个项目。

7. 综合案例

<template>
  <v-container grid-list-xs>
    <p></p>
    <v-slide-group
      center-active
      class="pa-4"
      active-class="indigo"
      show-arrows
      multiple
      prev-icon="mdi-minus"
      next-icon="mdi-plus"
    >
      <v-slide-item
        v-for="player in players"
        :key="player.name"
        v-slot="{ active, toggle }"
      >
        <v-card
          :color="active ? 'white--text' : 'grey darken-2 grey--text'"
          class="ma-4 text-center"
          height="400"
          width="150"
          @click="setoverlay(toggle, player)"
        >
          <v-img :src="player.img" class="grey lighten-2" height="350">
            <v-overlay
              opacity="0.4"
              color="yellow"
              :absolute="true"
              :value="player.overlay"
            >
              <v-icon size="100" color="indigo">mdi-check-bold</v-icon>
            </v-overlay>
          </v-img>
          <h1 v-show="active">{{ player.name }}</h1>
          <h3 v-show="!active">{{ player.name }}</h3>
        </v-card>
      </v-slide-item>
    </v-slide-group>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      overlay: false,
      players: [
        {
          name: "字母哥",
          overlay: false,
          img: require("../assets/player1.jpeg"),
        },
        {
          name: "老詹",
          overlay: false,
          img: require("../assets/player2.jpeg"),
        },
        {
          name: "老炮",
          overlay: false,
          img: require("../assets/player3.jpeg"),
        },
        {
          name: "我科",
          overlay: false,
          img: require("../assets/player4.jpeg"),
        },
        {
          name: "小学生",
          overlay: false,
          img: require("../assets/player5.jpeg"),
        },
        {
          name: "哈登",
          overlay: false,
          img: require("../assets/player6.jpeg"),
        },
      ],
    };
  },
  methods: {
    setoverlay(toggle, player) {
      toggle();
      player.overlay = !player.overlay;
    },
  },
};
</script>