窗口

v-window 组件提供将内容从一个窗口转换到另一个窗口的基础功能。其他组件，如 v-tabs, v-carousel 和 v-stepper 在它们的核心中利用了这个组件。

用例

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

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-item-group
  4.       v-model="window"
  5.       class="shrink mr-6"
  6.       mandatory
  7.       tag="v-flex"
  8.     >
  9.       <v-item
  10.         v-for="n in length"
  11.         :key="n"
  12.         v-slot:default="{ active, toggle }"
  13.       >
  14.         <div>
  15.           <v-btn
  16.             :input-value="active"
  17.             icon
  18.             @click="toggle"
  19.           >
  20.             <v-icon>mdi-record</v-icon>
  21.           </v-btn>
  22.         </div>
  23.       </v-item>
  24.     </v-item-group>
  26.     <v-col>
  27.       <v-window
  28.         v-model="window"
  29.         class="elevation-1"
  30.         vertical
  31.       >
  32.         <v-window-item
  33.           v-for="n in length"
  34.           :key="n"
  35.         >
  36.           <v-card flat>
  37.             <v-card-text>
  38.               <v-row class="mb-4" align="center">
  39.                 <v-avatar color="grey" class="mr-4"></v-avatar>
  40.                 <strong class="title">Title {{ n }}</strong>
  41.                 <v-spacer></v-spacer>
  42.                 <v-btn icon>
  43.                   <v-icon>mdi-account</v-icon>
  44.                 </v-btn>
  45.               </v-row>
  47.               <p>
  48.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  49.               </p>
  51.               <p>
  52.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  53.               </p>
  55.               <p>
  56.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  57.               </p>
  58.             </v-card-text>
  59.           </v-card>
  60.         </v-window-item>
  61.       </v-window>
  62.     </v-col>
  63.   </v-row>
  64. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 3,
  5.       window: 0,
  6.     }),
  7.   }
  8. </script>

Windows（窗口） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Windows（窗口） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="autorun" class="ma-2" label="Automatic switching"></v-switch>
  5.       <v-switch v-model="showArrows" class="ma-2" label="Show arrows"></v-switch>
  6.       <v-switch v-model="vertical" class="ma-2" label="Vertical"></v-switch>
  7.       <v-switch v-model="reverse" class="ma-2" label="Reverse"></v-switch>
  8.     </v-row>
  10.     <v-window
  11.       v-model="window"
  12.       class="elevation-1"
  13.       :vertical="vertical"
  14.       :show-arrows="showArrows"
  15.       :reverse="reverse"
  16.     >
  17.       <v-window-item
  18.         v-for="n in length"
  19.         :key="n"
  20.       >
  21.         <v-card flat>
  22.           <v-card-text>
  23.             <v-row class="mb-4" align="center">
  24.               <v-avatar color="grey" class="mr-4"></v-avatar>
  25.               <strong class="title">Title {{ n }}</strong>
  26.               <v-spacer></v-spacer>
  27.               <v-btn icon>
  28.                 <v-icon>mdi-account</v-icon>
  29.               </v-btn>
  30.             </v-row>
  32.             <p>
  33.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  34.             </p>
  36.             <p>
  37.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  38.             </p>
  40.             <p>
  41.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  42.             </p>
  43.           </v-card-text>
  44.         </v-card>
  45.       </v-window-item>
  46.     </v-window>
  47.   </v-row>
  48. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 3,
  5.       window: 0,
  6.       showArrows: false,
  7.       vertical: false,
  8.       reverse: false,
  9.       autorun: false,
  10.     }),
  12.     created () {
  13.       setInterval(() => {
  14.         if (!this.autorun) return
  15.         if (++this.window >= this.length) this.window = 0
  16.       }, 1000)
  17.     },
  18.   }
  19. </script>

Windows（窗口） - 图3

示例

下面是一些简单到复杂的例子。

垂直

v-window 可以是垂直的。 垂直窗口具有 Y 轴过渡而不是 X 轴过渡。

template script

  1. <template>
  2.   <v-card flat tile>
  3.     <v-window v-model="onboarding" vertical>
  4.       <v-window-item
  5.         v-for="n in length"
  6.         :key="`card-${n}`"
  7.       >
  8.         <v-card
  9.           color="grey"
  10.           height="200"
  11.         >
  12.           <v-row
  13.             class="fill-height"
  14.             align="center"
  15.             justify="center"
  16.             tag="v-card-text"
  17.           >
  18.             <h1 style="font-size: 5rem;" class="white--text">Slide {{ n }}</h1>
  19.           </v-row>
  20.         </v-card>
  21.       </v-window-item>
  22.     </v-window>
  24.     <v-card-actions class="justify-space-between">
  25.       <v-btn
  26.         text
  27.         @click="prev"
  28.       >
  29.         <v-icon>mdi-chevron-left</v-icon>
  30.       </v-btn>
  31.       <v-item-group
  32.         v-model="onboarding"
  33.         class="text-center"
  34.         mandatory
  35.       >
  36.         <v-item
  37.           v-for="n in length"
  38.           :key="`btn-${n}`"
  39.           v-slot:default="{ active, toggle }"
  40.         >
  41.           <v-btn
  42.             :input-value="active"
  43.             icon
  44.             @click="toggle"
  45.           >
  46.             <v-icon>mdi-record</v-icon>
  47.           </v-btn>
  48.         </v-item>
  49.       </v-item-group>
  50.       <v-btn
  51.         text
  52.         @click="next"
  53.       >
  54.         <v-icon>mdi-chevron-right</v-icon>
  55.       </v-btn>
  56.     </v-card-actions>
  57.   </v-card>
  58. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 3,
  5.       onboarding: 0,
  6.     }),
  8.     methods: {
  9.       next () {
  10.         this.onboarding = this.onboarding + 1 === this.length
  11.           ? 0
  12.           : this.onboarding + 1
  13.       },
  14.       prev () {
  15.         this.onboarding = this.onboarding - 1 < 0
  16.           ? this.length - 1
  17.           : this.onboarding - 1
  18.       },
  19.     },
  20.   }
  21. </script>

Windows（窗口） - 图4

反转

反转 v-window 总是显示反向转换。

template script

  1. <template>
  2.   <v-card flat tile>
  3.     <v-window v-model="onboarding" reverse>
  4.       <v-window-item
  5.         v-for="n in length"
  6.         :key="`card-${n}`"
  7.       >
  8.         <v-card
  9.           color="grey"
  10.           height="200"
  11.         >
  12.           <v-row
  13.             class="fill-height"
  14.             align="center"
  15.             justify="center"
  16.             tag="v-card-text"
  17.           >
  18.             <h1 style="font-size: 5rem;" class="white--text">Slide {{ n }}</h1>
  19.           </v-row>
  20.         </v-card>
  21.       </v-window-item>
  22.     </v-window>
  24.     <v-card-actions class="justify-space-between">
  25.       <v-btn
  26.         text
  27.         @click="prev"
  28.       >
  29.         <v-icon>mdi-chevron-left</v-icon>
  30.       </v-btn>
  31.       <v-item-group
  32.         v-model="onboarding"
  33.         class="text-center"
  34.         mandatory
  35.       >
  36.         <v-item
  37.           v-for="n in length"
  38.           :key="`btn-${n}`"
  39.           v-slot:default="{ active, toggle }"
  40.         >
  41.           <v-btn
  42.             :input-value="active"
  43.             icon
  44.             @click="toggle"
  45.           >
  46.             <v-icon>mdi-record</v-icon>
  47.           </v-btn>
  48.         </v-item>
  49.       </v-item-group>
  50.       <v-btn
  51.         text
  52.         @click="next"
  53.       >
  54.         <v-icon>mdi-chevron-right</v-icon>
  55.       </v-btn>
  56.     </v-card-actions>
  57.   </v-card>
  58. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 3,
  5.       onboarding: 0,
  6.     }),
  8.     methods: {
  9.       next () {
  10.         this.onboarding = this.onboarding + 1 === this.length
  11.           ? 0
  12.           : this.onboarding + 1
  13.       },
  14.       prev () {
  15.         this.onboarding = this.onboarding - 1 < 0
  16.           ? this.length - 1
  17.           : this.onboarding - 1
  18.       },
  19.     },
  20.   }
  21. </script>

Windows（窗口） - 图5

Material Kit

A complete set of Material Inspired themes built with Vuetify on top of Vue CLI.

ads by Vuetify

](https://store.vuetifyjs.com/product/material-kit-theme?ref=vuetifyjs.com)

入职

v-window 使它很容易创建自定义组件，如不同风格的幻灯片。

template script

  1. <template>
  2.   <v-card
  3.     color="black"
  4.     dark
  5.     flat
  6.     tile
  7.   >
  8.     <v-window v-model="onboarding">
  9.       <v-window-item
  10.         v-for="n in length"
  11.         :key="`card-${n}`"
  12.       >
  13.         <v-card
  14.           color="transparent"
  15.           height="200"
  16.         >
  17.           <v-row
  18.             class="fill-height"
  19.             align="center"
  20.             justify="center"
  21.             tag="v-card-text"
  22.           >
  23.             Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.
  24.           </v-row>
  25.         </v-card>
  26.       </v-window-item>
  27.     </v-window>
  29.     <v-card-actions class="justify-space-between">
  30.       <v-btn
  31.         text
  32.         @click="prev"
  33.       >
  34.         <v-icon>mdi-chevron-left</v-icon>
  35.       </v-btn>
  36.       <v-item-group
  37.         v-model="onboarding"
  38.         class="text-center"
  39.         mandatory
  40.       >
  41.         <v-item
  42.           v-for="n in length"
  43.           :key="`btn-${n}`"
  44.           v-slot:default="{ active, toggle }"
  45.         >
  46.           <v-btn
  47.             :input-value="active"
  48.             icon
  49.             @click="toggle"
  50.           >
  51.             <v-icon>mdi-record</v-icon>
  52.           </v-btn>
  53.         </v-item>
  54.       </v-item-group>
  55.       <v-btn
  56.         text
  57.         @click="next"
  58.       >
  59.         <v-icon>mdi-chevron-right</v-icon>
  60.       </v-btn>
  61.     </v-card-actions>
  62.   </v-card>
  63. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 3,
  5.       onboarding: 0,
  6.     }),
  8.     methods: {
  9.       next () {
  10.         this.onboarding = this.onboarding + 1 === this.length
  11.           ? 0
  12.           : this.onboarding + 1
  13.       },
  14.       prev () {
  15.         this.onboarding = this.onboarding - 1 < 0
  16.           ? this.length - 1
  17.           : this.onboarding - 1
  18.       },
  19.     },
  20.   }
  21. </script>

Windows（窗口） - 图6

帐户创建

使用平滑动画创建表单。v-window 会自动跟踪当前的选择索引以自动改变过渡方向。 这可以通过 reverse 属性手动控制。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="500"
  5.   >
  6.     <v-card-title class="title font-weight-regular justify-space-between">
  7.       <span>{{ currentTitle }}</span>
  8.       <v-avatar
  9.         color="primary lighten-2"
  10.         class="subheading white--text"
  11.         size="24"
  12.         v-text="step"
  13.       ></v-avatar>
  14.     </v-card-title>
  16.     <v-window v-model="step">
  17.       <v-window-item :value="1">
  18.         <v-card-text>
  19.           <v-text-field
  20.             label="Email"
  21.             value="john@vuetifyjs.com"
  22.           ></v-text-field>
  23.           <span class="caption grey--text text--darken-1">
  24.             This is the email you will use to login to your Vuetify account
  25.           </span>
  26.         </v-card-text>
  27.       </v-window-item>
  29.       <v-window-item :value="2">
  30.         <v-card-text>
  31.           <v-text-field
  32.             label="Password"
  33.             type="password"
  34.           ></v-text-field>
  35.           <v-text-field
  36.             label="Confirm Password"
  37.             type="password"
  38.           ></v-text-field>
  39.           <span class="caption grey--text text--darken-1">
  40.             Please enter a password for your account
  41.           </span>
  42.         </v-card-text>
  43.       </v-window-item>
  45.       <v-window-item :value="3">
  46.         <div class="pa-4 text-center">
  47.           <v-img
  48.             class="mb-4"
  49.             contain
  50.             height="128"
  51.             src="https://cdn.vuetifyjs.com/images/logos/v.svg"
  52.           ></v-img>
  53.           <h3 class="title font-weight-light mb-2">Welcome to Vuetify</h3>
  54.           <span class="caption grey--text">Thanks for signing up!</span>
  55.         </div>
  56.       </v-window-item>
  57.     </v-window>
  59.     <v-divider></v-divider>
  61.     <v-card-actions>
  62.       <v-btn
  63.         :disabled="step === 1"
  64.         text
  65.         @click="step--"
  66.       >
  67.         Back
  68.       </v-btn>
  69.       <v-spacer></v-spacer>
  70.       <v-btn
  71.         :disabled="step === 3"
  72.         color="primary"
  73.         depressed
  74.         @click="step++"
  75.       >
  76.         Next
  77.       </v-btn>
  78.     </v-card-actions>
  79.   </v-card>
  80. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       step: 1,
  5.     }),
  7.     computed: {
  8.       currentTitle () {
  9.         switch (this.step) {
  10.           case 1: return 'Sign-up'
  11.           case 2: return 'Create a password'
  12.           default: return 'Account created'
  13.         }
  14.       },
  15.     },
  16.   }
  17. </script>

Windows（窗口） - 图7