当前位置：首页 > article >正文

vuetify学习笔记（v-app和v-responsive）

article 2024/10/22 8:27:33

我最近在学习vuetify3，我以前是用element plus和taiwind css。vuetify的一个好处是，它不仅是一个向element plus一样提供好用的组件库，而且还提供了向taiwind css一样的原子类，可以通过类名方便的定义组建的样式。以前element plus改组件的样式，经常在浏览器摸来摸去，不是很方便，但是用vuetify没有这种问题。

但是vuetify的官方文档感觉写的不是很好，很杂。所以我用chatgpt结合vuetify的官方文档，写了自己的vuetify笔记。

1.v-app

v-app组建有以下几种作用：

1.1布局管理

v-app 组件充当布局的根组件。应用程序中的每个布局子组件（如 v-app-bar、v-navigation-drawer 等）都会自动注册到最近的 v-app 组件中，从而在窗口中自动排列和渲染。意思就是v-app是跟组件，所有其它vuetify\组件都需要被 v-app包裹。

比如，下面的代码中v-app-bar没有被v-app包裹：

控制台就报错了：

1.2全局主题管理

v-app 组件能够为整个应用程序设置主题。Vuetify 提供了默认的明亮和黑暗主题，通过在 v-app 上设置 theme 属性，可以轻松地在不同主题之间切换。

<script setup>
import { ref } from 'vue'

const theme = ref('light')

function onClick () {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <v-responsive>
    <v-app :theme="theme">
      <v-app-bar class="px-3">
        <v-spacer></v-spacer>

        <v-btn
            text="主题切换"
            @click="onClick"
            class="bg-blue"
        ></v-btn>
      </v-app-bar>

      <v-main>
        <v-container>
          <h1>Main Content</h1>
        </v-container>
      </v-main>
    </v-app>
  </v-responsive>
</template>

这个切换主题的功能我觉得太香了。

1.3 渲染顺序

v-app 组件内的元素渲染顺序会影响它们的堆叠顺序。比如，如果 v-app-bar 在 v-navigation-drawer 前面定义，那么 v-app-bar 会覆盖 v-navigation-drawer。

<script setup>
import { ref } from 'vue'

const theme = ref('light')

function onClick () {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <v-responsive>
    <v-app :theme="theme">
      <v-app-bar class="px-3">
        <v-spacer></v-spacer>

        <v-btn
            text="主题切换"
            @click="onClick"
            class="bg-blue"
        ></v-btn>
      </v-app-bar>

      <v-navigation-drawer>
      </v-navigation-drawer>
      
      <v-main>
        <v-container>
          <h1>Main Content</h1>
        </v-container>
      </v-main>
    </v-app>
  </v-responsive>
</template>

渲染效果：

<script setup>
import { ref } from 'vue'

const theme = ref('light')

function onClick () {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <v-responsive>
    <v-app :theme="theme">
      <v-navigation-drawer>
      </v-navigation-drawer>
      
      <v-app-bar class="px-3">
        <v-spacer></v-spacer>

        <v-btn
            text="主题切换"
            @click="onClick"
            class="bg-blue"
        ></v-btn>
      </v-app-bar>

      <v-main>
        <v-container>
          <h1>Main Content</h1>
        </v-container>
      </v-main>
    </v-app>
  </v-responsive>
</template>

渲染效果：

1.4 全局样式和配置

v-app 组件是应用程序级别配置的入口点，可以在其中设置全局样式、变量和主题属性。

2.v-responsive

v-responsive 是 Vuetify 中的一个组件，主要用于创建一个具有响应式行为的容器。v-responsive中可以设置屏幕最大高度：max-height="xxx"，无论屏幕尺寸如何变化，它都能保持设定的宽高比。

<script setup>
import { ref } from 'vue'

const theme = ref('light')

function onClick () {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <v-responsive max-height="300">
    <v-app :theme="theme">
      <v-app-bar class="px-3">
        <v-spacer></v-spacer>

        <v-btn
            text="主题切换"
            @click="onClick"
            class="bg-blue"
        ></v-btn>
      </v-app-bar>

      <v-main>
        <v-container>
          <h1>Main Content</h1>
        </v-container>
      </v-main>
    </v-app>
  </v-responsive>
</template>

但是我没有get到这个v-responsive怎么用，好象可以用于响应式设计。
有一点很明确，v-responsive可以包裹v-app。