vue.js - 为什么Vuetify抽屉导航在大屏幕尺寸下飞出？我如何防止它发生？

Question

我有以下带有抽屉导航的 Vuetify 工具栏。这是我第一次尝试使用 Vuetify 构建 Vue 应用程序在较小的屏幕尺寸下它的行为符合预期。一旦屏幕宽度达到大断点(1264 像素)，抽屉就会飞出。使用 Chrome 版本 72.0.3626.109(官方版本)(64 位)

我在文档中找不到任何对这种预期行为的引用，更不用说如何防止它了。有没有一种简单的方法可以阻止这种行为？

我的 app.vue

<template>
  <v-app>
    <v-navigation-drawer v-model="sidebar" app>
    </v-navigation-drawer>
    <v-toolbar height=48 app>
      <v-toolbar-side-icon class="hidden-sm-and-up" @click="sidebar = !sidebar">
      </v-toolbar-side-icon>
      <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn to="/" flat>Home</v-btn>
        <v-btn to="/about" flat>About</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>
<script>
  export default {
    data () {
      return {
        appTitle: 'VueTodo',
        sidebar: false
      }
    }
  }
</script>
<style>
</style>

Answer 1

有一个 Prop 可以处理这种确切的行为 disable-resize-watcher :

<v-navigation-drawer disable-resize-watcher v-model="sidebar" app>
</v-navigation-drawer>

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