Vuetify 同时设置工具栏和导航抽屉

Vuetify Set Toolbar and navigation drawer simultaneously

我想单独设置带工具栏的导航抽屉,并从工具栏切换抽屉。

代码:

<v-navigation-drawer absolute temporary left v-model="drawer">
      <v-list-item-title class="text-h6">&nbsp;</v-list-item-title>
      <v-list nav dense>
        <div v-for="(link, i) in links" :key="i">
          <v-list-item v-if="!link.subLinks" :to="link.to" class="v-list-item">
            <v-list-item-icon>
              <v-icon>{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-title v-text="link.text" class="subtitle-2" />
          </v-list-item>

          <v-list-group
            v-else
            :key="link.text"
            no-action
            :prepend-icon="link.icon"
            :value="false"
          >
            <template v-slot:activator>
              <v-list-item-title>{{ link.text }}</v-list-item-title>
            </template>

            <v-list-item
              v-for="sublink in link.subLinks"
              :to="sublink.to"
              :key="sublink.text"
            >
              <v-list-item-icon>
                <v-icon>{{ sublink.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="subtitle-2">{{ sublink.text }}</v-list-item-title>
            </v-list-item>
          </v-list-group>
        </div> 
    </v-list>   
 </v-navigation-drawer> 
<v-toolbar color="primary" right @click.stop="drawer = !drawer">
  <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  <v-spacer></v-spacer>
</v-toolbar>

如您所见,我已经设置了导航抽屉和工具栏。

目前:

预计:

  1. v-toolbar 替换为 v-app-bar
  2. app clipped-left 道具添加到 v-app-bar
  3. 从抽屉中取出 absolute temporary 个道具
  4. app clipped fixed个道具添加到抽屉