javascript - Vuetify.js 抽屉导航未正确关闭

Question

我将浏览器窗口设置为移动设备大小以显示抽屉导航的工具栏图标。当我单击工具栏图标时，抽屉导航将显示，但是当我将浏览器切换回 100% 时，抽屉导航不会消失，而是永久存在。因此，我无法再关闭抽屉，因为工具栏仅出现在移动窗口中，该窗口应该在调整大小回桌面大小期间关闭

这是我的模板

<template>
  <div>
    <v-navigation-drawer 
        v-model="sideNav.model"
        absolute
        overflow
        disable-resize-watcher
        disable-route-watcher
        left
        persistent
        :app="sideNav.type = ''"
    >
      <v-list>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>supervisor_account</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>Login</v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app dark class="primary" >
      <v-toolbar-side-icon
        @click.stop="sideNav.model = !sideNav.model" class="hidden-sm-and-up"

        ></v-toolbar-side-icon>
      <v-toolbar-title>DevMeetup</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">

        <v-btn flat router :to="{name : 'Home'}">
            <v-icon left dark>supervisor_account</v-icon>
            Home
        </v-btn>
        <v-btn flat router :to="{name : 'Login'}" >
            <v-icon left dark>supervisor_account</v-icon>
            Login

        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <main>

    </main>
  </div>
</template>

<script>
  export default {
    data : () => ({
      sideNav: {
        model: false,
        type: 'persistent',
        clipped: false,
        floating: false,
        mini: false,
        stateless:true
      },
      isMobile: false

    }),
    mounted(){

    }
  }
</script>

Answer 1

您已禁用调整大小观察器。尝试一下。