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

您已停用调整大小的观察者。试试吧。

Vuetify.js导航抽屉没有正确关闭

1 个答案: