Vuetify 导航栏中的中心徽标

Posted 2023-02-23

【中文标题】Vuetify 导航栏中的中心徽标

【英文标题】：Center logo within Vuetify navigation bar

【发布时间】：2021-04-01 03:50:48

【问题描述】：

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

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

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

  <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"  />
    </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>

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

【问题讨论】：

能否提供渲染后的html和css？

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

祝你好运。

【讨论】：

我想我需要 center-me 类的 CSS 规则才能使用第一个解决方案

它在我提供的第一个解决方案代码的

【参考方案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"  />
  </router-link>

  <v-spacer></v-spacer>

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

【讨论】：

这不太行，它在徽标的左侧和右侧放置了相等数量的水平空白，但它不会在其父级中水平居中