Vuetify 面包屑文本颜色答案

【问题标题】：Vuetify breadcrumbs text colorVuetify 面包屑文本颜色
【发布时间】：2021-09-13 15:04:40
【问题描述】：

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

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>

【问题讨论】：

标签： vuetify.js

【解决方案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>

【讨论】：

谢谢，帮了大忙。我在 created() 中添加了一个 switch 语句来根据 prop 变量激活颜色，效果很好。

【解决方案2】：

我发现深度选择器 (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) 通常有助于设置 Vuetify 组件的样式。我将此添加到我的组件范围内的 CSS 中，颜色对于链接来说效果很好：

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

我通过查看 Inspect（在 Chrome 中）下的 Elements-tab 找到了相关标签。

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

【讨论】：

像魅力一样工作！！