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

Question

当浏览器的宽度达到一定大小时，我希望导航抽屉组件恢复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

Answer 1

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

当屏幕宽度低于 1264 px 时，条件返回 true，迷你变体开始发挥作用，当屏幕宽度高于 1264 px 时，条件返回 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>