Vuetify 面包屑文本颜色

Question

我正在尝试根据属性为我的面包屑设置不同的文本颜色，但我不知道如何在任何地方应用这些颜色。也无法在项目中添加颜色或 class。

breadcrumbItems() {
  return [
    {
      text: this.$t("receiving.breadcrumbs.step1"),
      disabled: this.item.Status !== "STEP1"
    },
    {
      text: this.$t("receiving.breadcrumbs.step2"),
      disabled: this.item.Status !== "STEP2"
    },
    {
      text: this.$t("receiving.breadcrumbs.step3"),
      disabled: this.item.Status !== "STEP3"
    }
  ];
}

<v-breadcrumbs :items="breadcrumbItems" class="breadStyle">
  <template v-slot:divider>
    <v-icon size="25">mdi-forward</v-icon>
  </template>
</v-breadcrumbs>

Answer 1

查看 v-breadcrumbs 的 API：https://vuetifyjs.com/en/api/v-breadcrumbs-item/ 它不提供属性“颜色”或类似的东西，但有一个插槽，因此您可以在其中传递任何类型的组件。

您可以创建一个 <span> 并根据项目自定义其颜色和样式：

<template>
  <v-breadcrumbs :items="items">
    <template v-slot:divider>
      <v-icon size="25">mdi-forward</v-icon>
    </template>
    <template v-slot:item="{ item }">
      <v-breadcrumbs-item :disabled="item.disabled">
        <span :style="`color: ${item.color}`">
          {{ item.text.toUpperCase() }}
        </span>
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  data: () => ({
    items: [
      {
        text: "Dashboard",
        disabled: false,
        color: "green",
      },
      {
        text: "Link 1",
        disabled: false,
        color: "blue",
      },
      {
        text: "Link 2",
        disabled: true,
        color: "red",
      },
    ],
  }),
};
</script>

Answer 2

我发现深度选择器 (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) 通常有助于设置 Vuetify 组件的样式。我将其添加到范围为 CSS 的组件中，并且颜色适用于链接：

.v-breadcrumbs >>> a {
    color: purple;
}

我通过查看“检查”下的“元素”选项卡找到了相关标签（在 Chrome 中）。

我不知道这是否是适合您的具体情况的最佳解决方案，但我想我会为使用案例更简单的任何人添加这个。

Vuetify 面包屑文本颜色

Vuetify breadcrumbs text color

vuetify.js