Vuetify v-spacer 不适用于 v-tabs

Question

我需要在导航栏的左侧放置徽标，在右侧放置标签。我使用v-space 来做到这一点，但它不起作用。我检查过 - 它适用于v-btn，但不适用于v-tabs。我使用 Vue 2 和 Vuetify 2.6：

App.vue

<template>
  <v-app>  
    <v-main>
      <Navbar />
      <router-view/>
    </v-main>
  </v-app>
</template>

Navbar.vue

<template>
  <v-app-bar 
    app
    dense
    dark >

        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

    <v-spacer></v-spacer>   

    <v-tabs>
      <v-tab>Project</v-tab>
      <v-tab>Users</v-tab>
      <v-tab>Settings</v-tab>
    </v-tabs> 

  </v-app-bar>
</template>

这是我得到的：

我希望菜单（选项卡）向右对齐。为什么v-spacer 不在这里工作？ 我也检查了这个主题https://github.com/nuxt-community/vuetify-module/issues/165，但它也没有解决问题。

Answer 1

试试<v-tabs right>

<template>
  <v-app-bar 
    app
    dense
    dark >

        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

    <v-tabs right>
      <v-tab>Project</v-tab>
      <v-tab>Users</v-tab>
      <v-tab>Settings</v-tab>
    </v-tabs> 

  </v-app-bar>
</template>

Answer 2

检查我制作的这个代码框：https://codesandbox.io/s/stack-70115344-jzhii?file=/src/components/Navbar.vue

无需使用v-spacer。您只需要将 right 属性设置为 v-tabs 组件即可。

    <v-tabs right>
      <v-tab>Project</v-tab>
      <v-tab>Users</v-tab>
      <v-tab>Settings</v-tab>
    </v-tabs>