如何更改或覆盖特定的 PrimeVue 组件类？

Question

我正在使用 Tailwind PrimeVue ProgressBar UI 组件。

我想根据进度条的值动态更改进度条颜色。

因此我创建了一个方法，该方法接受该值并返回正确的背景类颜色。使用 PrimeVue Pass Through 我正在组件上设置该类。

它之所以有效，是因为条形颜色正在改变，但我的代码正在替换所有条形类，而不仅仅是背景类。这导致了其他问题，例如对齐等，但现在已经消失了。

为了避免这些问题，我如何有选择地仅替换或覆盖

bg-*

类？

我不想手动定义所有基类加上我的自定义类，因为这违背了预设的目的。

<template>
  <Panel>
    <div class="flex flex-col gap-4">
      <ProgressBar :value="50" />
      <ProgressBar
        :value="70"
        :pt:value:class="
          getScoreBackgroundColor(70)
        "
      />
    </div>
  </Panel>
</template>

<script setup lang="ts">
// Get progress bar color based on the score
const getScoreBackgroundColor = (score?: number) => {
  // If no score is provided, return medium-grey
  if (!score) {
    return "grey-medium";
  }

  // Else, return the appropriate color based on the score
  if (score <= 50) {
    // Very Bad
    return "bg-red-medium";
  } else if (score > 50 && score <= 66) {
    // Bad
    return "bg-orange-medium";
  } else if (score > 66 && score <= 83) {
    // Good
    return "bg-amber-medium";
  } else {
    // Very good
    return "bg-green-medium";
  }
};
</script>

Answer 1

想通了。

我需要添加

:ptOptions="{ mergeProps: true }"

，如此处所述。

例如：

      <ProgressBar
        :value="50"
        :ptOptions="{ mergeProps: true }"
        :pt:value:class="getScoreBackgroundColor(50)"
      />