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

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

不需要使用 v-spacer。你只需要为 v-tabs 组件设置 right 属性。

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

Vuetify v-spacer 不适用于 v-tabs

Vuetify v-spacer is not working with v-tabs

vue.js

vuejs2

vuetify.js