Vuetify 同时设置工具栏和导航抽屉
Vuetify Set Toolbar and navigation drawer simultaneously
我想单独设置带工具栏的导航抽屉,并从工具栏切换抽屉。
代码:
<v-navigation-drawer absolute temporary left v-model="drawer">
<v-list-item-title class="text-h6"> </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>
如您所见,我已经设置了导航抽屉和工具栏。
目前:
预计:
- 将
v-toolbar
替换为 v-app-bar
- 将
app clipped-left
道具添加到 v-app-bar
- 从抽屉中取出
absolute temporary
个道具
- 将
app clipped fixed
个道具添加到抽屉
我想单独设置带工具栏的导航抽屉,并从工具栏切换抽屉。
代码:
<v-navigation-drawer absolute temporary left v-model="drawer">
<v-list-item-title class="text-h6"> </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>
如您所见,我已经设置了导航抽屉和工具栏。
目前:
预计:
- 将
v-toolbar
替换为v-app-bar
- 将
app clipped-left
道具添加到v-app-bar
- 从抽屉中取出
absolute temporary
个道具 - 将
app clipped fixed
个道具添加到抽屉