我需要在導航欄的左側和右側的選項卡上放置徽標。我曾經v-space這樣做過,但它不起作用。我檢查過 - 它適用于v-btn但不適用于v-tabs. 我使用 Vue 2 和 Vuetify 2.6:
應用程式
<template>
<v-app>
<v-main>
<Navbar />
<router-view/>
</v-main>
</v-app>
</template>
導航欄.vue
<template>
<v-app-bar
app
dense
dark >
<v-img
alt="Vuetify v-spacer 不適用于 v-tabs"
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但它也沒有解決問題。
uj5u.com熱心網友回復:
檢查我制作的這個代碼和框:https ://codesandbox.io/s/stack-70115344-jzhii?file =/ src/components/Navbar.vue
沒有必要使用v-spacer。您只需要為v-tabs 組件設定正確的prop。
<v-tabs right>
<v-tab>Project</v-tab>
<v-tab>Users</v-tab>
<v-tab>Settings</v-tab>
</v-tabs>
uj5u.com熱心網友回復:
嘗試 <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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/366320.html
