Vuetify v-spacer 不适用于 v-tabs

Posted 2023-02-16

【中文标题】Vuetify v-spacer 不适用于 v-tabs

【英文标题】：Vuetify v-spacer is not working with v-tabs

【发布时间】：2022-01-03 23:31:02

【问题描述】：

我需要在导航栏的左侧放置徽标，在右侧放置标签。我使用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
          
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          
        />

    <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，但它也没有解决问题。

【参考方案1】：

试试<v-tabs right>

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

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

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

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

【参考方案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> 

【讨论】：

谢谢！您的示例取自 vuetify 登录页面。我还检查了它是如何工作的，我可以看到在徽标和按钮之间放置了 。然后就可以了。在您的示例中，它仅适用于“正确”。我很好奇为什么 v-spacer 在这里不起作用？

嗨！，在 vuetify 默认登录页面上，他们使用 因为他们使用的是按钮而不是选项卡。 组件占据了它所在位置的所有可用水平空间。这就是为什么 对它没有影响，但它有像 centered 和 right 这样的道具，可以让你相应地对齐标签。

太好了，感谢您的澄清！