Vuetify 导航抽屉，在小屏幕上制作迷你而不是隐藏答案

【问题标题】：Vuetify navigation drawer, make mini on small screen rather than hideVuetify 导航抽屉，在小屏幕上制作迷你而不是隐藏
【发布时间】：2021-10-18 09:36:11
【问题描述】：

当浏览器具有一定的尺寸宽度时，我希望导航抽屉组件恢复为mini，而不是像默认情况下那样隐藏：

https://vuetifyjs.com/en/components/navigation-drawers/#api

<template>
    <v-navigation-drawer
        app
        floating
    > 

        <v-list nav rounded>
            <v-list-item link>
                <v-list-item-icon>
                    <v-icon>mdi-heart</v-icon>
                </v-list-item-icon>
                <v-list-item-title>Heart</v-list-item-title>
            </v-list-item>
        </v-list>

    </v-navigation-drawer>
</template>

<script>
export default {
  name: "AppNavigation",
  data: () => ({
 
  })
}
</script>

<style scoped>

</style>

预期行为

当我减小浏览器宽度时，它应该显示像迷你变体一样的 v-list 图标，或者在悬停时展开。

实际行为

导航抽屉在设计上完全消失了，但不知道如何以正确的方式阻止它。

想法

有permanent 标志，但我如何检测到屏幕尺寸发生了变化？我可以组合使用permanent 和mini.sync

【问题讨论】：

标签： vuetify.js

【解决方案1】：

您可以通过 $vuetify.breakpoint.<breakpoint> 访问 vuetify 的内置断点，因此对于抽屉，您可以使用此绑定：:mini-variant="$vuetify.breakpoint.mdAndDown"。

如果屏幕宽度低于 1264 像素，则条件返回 true，并且迷你变体开始播放，它在 1264 像素以上返回 false，因此您可以使用正常的抽屉。

查看下面的演示并以全屏模式运行它并调整窗口大小以查看效果。

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-navigation-drawer app color="indigo" floating permanent :mini-variant="$vuetify.breakpoint.mdAndDown">

      <v-list nav rounded>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-heart</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Heart</v-list-item-title>
        </v-list-item>
      </v-list>

    </v-navigation-drawer>
  </v-app>
</div>

【讨论】：