Vuetify——使用 v-menu

最新推荐文章于 2024-10-24 16:31:51 发布

原创最新推荐文章于 2024-10-24 16:31:51 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在这里插入图片描述

<v-app-bar app elevation="1" light clipped-right class="white pr-3">
      <v-img
        class="shrink v-toolbar__content"
        contain
        max-width="100"
        min-width="50"
        height="40"
        aspect-ratio="1"
        src="/upload/logo.png"
        :lazy-src="require('@/assets/favicon.png')"
      />
      <v-spacer style="border-left:1px solid #eee" class="text-h6 ml-4 pl-4"></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">
              {{ role }}
              <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 to="#" @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>