v-navigation-drawer 是您的用户用于导航应用程序的组件。 导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。 为了显示的目的,一些示例被包装在 v-card 元素中。 在您的应用程序中,通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。
<template>
<v-app id="app">
<v-app-bar
app
elevation="1"
light
clipped-right
class="v-bar--underline"
>
<v-app-bar-nav-icon
v-if="!drawer"
@click="drawer = !drawer"
></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<div class="text-center">
<v-menu open-on-hover bottom offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on" color="#444">
{{ fullname || login_name }}
<v-icon class="ml-1">mdi-account</v-icon>
</v-btn>
</template>
<v-sheet class="overflow-hidden">
<v-list dense expand nav>
<v-list-item to="/user/home">
<v-list-item-title class="d-flex align-center">
<v-icon class="mr-2">mdi-account</v-icon>
用户首页
</v-list-item-title>
</v-list-item>
<v-list-item @click="logout()">
<v-list-item-title class="d-flex align-center">
<v-icon class="mr-2">mdi-logout</v-icon>
登出
</v-list-item-title>
</v-list-item>
</v-list>
</v-sheet>
</v-menu>
</div>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
app
floating
fixed
width="300"
v-if="role"
>
<v-list
dense
nav
style="border-right: 1px solid #0000001f;"
class="fill-height"
>
<v-list-group>
<v-list-item>
<v-list-item-title>Foo</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Bar</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
data(){
return {
drawer: true,
login_name: null,
fullname: null
}
}