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.breakpoint.<breakpoint> 访问 vuetify 的内置断点，所以对于抽屉你可以有这个绑定：:mini-variant="$vuetify.breakpoint.mdAndDown".

条件 returns 屏幕宽度低于 1264 像素时为真，迷你变体开始播放，它 returns 高于 1264 像素时为假，因此您可以使用普通抽屉。

检查下面的演示，运行它在全屏模式下并调整 window 大小以查看效果。

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>

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

Vuetify navigation drawer, make mini on small screen rather than hide

vuetify.js