vuetify.js - 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

标签： vuetify.js

Answer 1

您可以通过访问 vuetify 的内置断点，$vuetify.breakpoint.<breakpoint>因此对于抽屉，您可以拥有此绑定：: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>