Vuetify集工具栏和导航抽屉同时

Question

我想单独设置导航抽屉与工具栏和切换抽屉从工具栏。

代码：

<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>

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

目前：

​

预期：

​

Answer 1

v-app-bar

• Add

• 将v-toolbar替换为从抽屉

• 到v-app-bar

• Remove absolute temporary道具的app clipped-left道具，将app clipped fixed道具添加到抽屉

G 215