Vuetify v-drawer 在大屏幕上保持打开状态答案

【问题标题】：Vuetify v-drawer keep open on large screenVuetify v-drawer 在大屏幕上保持打开状态
【发布时间】：2023-01-26 20:05:28
【问题描述】：

是否可以在大屏幕上打开 Vuetify v-drawer 并在移动屏幕上通过工具栏按钮打开/关闭？

就像是： https://design.gitlab.com/brand/basics

【问题讨论】：

标签： vuetify.js drawer

【解决方案1】：

检查我制作的这个codesanbox：https://codesandbox.io/s/stack-70931919-gbrmr?file=/src/App.vue

这是我制作的基本导航抽屉设置。随时根据您的需要修改它，如果您需要帮助，请告诉我！

【讨论】：

这很接近但不是我需要的： 1. 当在大屏幕上抽屉开始关闭但我需要它始终打开，因为没有按钮可以打开它。 2. 在小屏幕上似乎还可以。
imgur.com/a/mFCmCJb
明白了，再次检查codesanbox，我更新了它。您可以通过修改v-navigation-drawer 和v-app-bar 上剪切属性的断点来实现。您还需要在导航抽屉上使用 permanent 道具并仅在 smAndUp 上激活它。 imgur.com/a/DmYuwUh
顺便说一句，如果你想让导航抽屉使用侧面的所有空间，就像这个imgur.com/a/h7jtVmf，只需删除v-navigation-drawer和v-app-bar上的剪辑道具。

【解决方案2】：

@cmfc31 的解决方案很棒，但不幸的是它不再适用于 Vuetify 3。

以下是使用 Vuetify 3 在大屏幕上默认打开导航抽屉的方法：

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

const { smAndUp } = useDisplay()

const navDrawerIsOpen = ref(smAndUp ? true : false) //*
</script>

<template>
  <v-navigation-drawer
    v-model="navDrawerIsOpen"
  >
    <!-- nav drawer contents here -->
  </v-navigation-drawer>
</template>

* 您可以将此行缩短为const navDrawerIsOpen = ref(!!smAndUp)。为了更好的可读性，我选择了长语法。

要在小屏幕上打开/关闭导航抽屉，您可以使用应用栏中常用的打开/关闭按钮或您喜欢的任何其他方式在true 和false 之间切换navDrawerIsOpen 的值。

您将在此处找到有关 Vuetify 3 中断点的更多信息：https://next.vuetifyjs.com/en/features/display-and-platform/

【讨论】：