Material Design风格神框架vuetify 学习笔记(十二) 组件的基础

最新推荐文章于 2024-06-23 09:39:39 发布

finedayforu

最新推荐文章于 2024-06-23 09:39:39 发布

阅读量905

点赞数

文章标签： css js java html javascript

本文链接：https://blog.csdn.net/finedayforu/article/details/120077642

版权

本文介绍了Vuetify框架中的v-window、v-sheet和v-slide-group组件。v-window提供了窗口过渡效果，v-sheet作为基础组件用于创建不同样式，v-slide-group则用于展示伪分页信息并支持多种交互模式。文章通过实例详细讲解了每个组件的基本用法和高级特性。

摘要由CSDN通过智能技术生成

一. 窗口 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_fl