Vuetify实现navigation-drawer小屏切换为mini模式而非隐藏

Vuetify 内置了响应式断点能力，无需手动监听窗口尺寸变化，结合 permanent 属性、mini.sync 双向绑定即可实现需求，完整可运行代码如下：

<template>
    <v-navigation-drawer
        app
        floating
        permanent
        :mini.sync="isMini"
        @mouseenter="handleDrawerEnter"
        @mouseleave="handleDrawerLeave"
    > 

        <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: () => ({
    isMobile: false,
    isMini: false
  }),
  mounted() {
    this.checkScreenSize()
    // 监听Vuetify内置断点变化
    this.unwatchBreakpoint = this.$watch(
      () => this.$vuetify.breakpoint.name,
      () => this.checkScreenSize()
    )
  },
  beforeDestroy() {
    if (this.unwatchBreakpoint) this.unwatchBreakpoint()
  },
  methods: {
    checkScreenSize() {
      // 以960px（md断点）作为小屏分界，可自行调整
      this.isMobile = this.$vuetify.breakpoint.mdAndDown
      this.isMini = this.isMobile
    },
    handleDrawerEnter() {
      // 仅小屏模式下hover展开
      if (this.isMobile) this.isMini = false
    },
    handleDrawerLeave() {
      // 仅小屏模式下移出恢复迷你状态
      if (this.isMobile) this.isMini = true
    }
  }
}
</script>

<style scoped>

</style>

配置说明 #

• 阈值调整：可自行修改切换迷你模式的屏幕分界尺寸，将checkScreenSize方法中的mdAndDown替换为smAndDown即可改为600px阈值，也可直接通过this.$vuetify.breakpoint.width < 自定义像素值的方式自定义阈值
• 动画调整：如需修改抽屉展开收起的动画速度，可给v-navigation-drawer添加transition属性自定义过渡效果
• 全量迷你模式：如需在所有屏幕尺寸下都默认展示迷你抽屉，仅hover时展开，直接删除断点判断逻辑，固定isMini默认值为true即可

Vuetify3适配说明 #

如果是Vuetify3项目，使用组合式API时，替换为useDisplay组合式函数获取断点信息即可，核心逻辑完全一致。

内容的提问来源于stack exchange，提问作者Ari