【问题标题】: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/ 它没有提供属性“颜色”或类似的东西,但有一个插槽,因此您可以在其中传递任何类型的组件。

    您可以创建&lt;span&gt; 并根据项目自定义其颜色和样式:

    <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 找到了相关标签。

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

    【讨论】:

    • 像魅力一样工作!!
    猜你喜欢
    • 1970-01-01
    • 2019-07-04
    • 2019-07-05
    • 1970-01-01
    • 2017-07-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多