Vuetify 导航栏中的中心徽标

Question

我的 Vue/Vuetify 应用有一个导航栏，其中包含以下元素

1. 汉堡菜单
2. 链接到主页的 SVG 徽标
3. 一些导航链接

我想将菜单左对齐，将徽标居中，并将导航链接右对齐。这是我正在使用的标记：

  <v-app-bar app>
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item v-for="(menuItem, index) in menuItems"
                     :to="menuItem.route"
                     :key="index">
          {{ menuItem.text }}
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <v-spacer />

    <router-link v-for="(menuItem, index) in menuItems"
                 :key="index"
                 :to="menuItem.route">
      {{ menuItem.text }}
    </router-link>
  </v-app-bar>

我已经多次尝试将徽标居中，但似乎无法弄清楚。

Answer 1

这取决于您要达到的目标。

如果您需要将徽标居中，无论其他组件占用多少空间，请执行以下操作（但这会很棘手，因为它取决于右侧路由器链接的长度，以及多少他们占用的空间）

<template>
    <v-app>
        <v-app-bar app>
            <!-- hamburger menu --->
            <template #activator="{ on, attrs }">
                <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
            </template>
            <v-list>
                <v-list-item
                    v-for="(menuItem, index) in menuItems"
                    :to="menuItem.route"
                    :key="index"
                >{{ menuItem.text }}</v-list-item>
            </v-list>

            <!-- logo --->
            <div class="center-me">
                <router-link :to="{name: 'home'}">
                    <v-img src="@/assets/logo.svg" width="110px" />
                </router-link>
            </div>

            <!-- navigation links --->
            <v-spacer />
            <div class="d-flex flex-row">
                <router-link
                    v-for="(menuItem, index) in menuItems"
                    :key="index"
                    :to="menuItem.route"
                >{{ menuItem.text }}</router-link>
            </div>
        </v-app-bar>
    </v-app>
</template>

<style scoped>
    .center-me {
        position: absolute;
        margin-left: 50%;
        transform: translate(-50%, 0);
    }
</style>

不过，您可以使用 Vuetify 提供的 Flexbox 类在三个部分之间平均分配空间，如下所示（另外，在徽标周围使用 v-spacer 也可以解决问题）

<v-app-bar app>
  <div class="d-flex flex-row justify-space-between align-center" style="width:100%">
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item
          v-for="(menuItem, index) in menuItems"
          :to="menuItem.route"
          :key="index"
        >{{ menuItem.text }}</v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <div class="d-flex flex-row">
      <router-link
        v-for="(menuItem, index) in menuItems"
        :key="index"
        :to="menuItem.route"
      >{{ menuItem.text }}</router-link>
    </div>
  </div>
</v-app-bar>

祝你好运。

Answer 2

你可以像这样使用v-spacer：

<v-app-bar>
  <v-menu>
     // some code 
  </v-menu>

  <v-spacer></v-spacer>

  <!-- logo --->
  <router-link :to="{name: 'home'}">
     <v-img src="../assets/logo.svg" width="110px" />
  </router-link>

  <v-spacer></v-spacer>

  <router-link>
    // some code
  </router-link>
</v-app-bar>