如何从替代中选择一种颜色作为默认值？

如何解决如何从替代中选择一种颜色作为默认值？

我已经为nuxt-tailwind项目创建了配色方案，但是我在这里遇到了问题。我需要使用这样的不透明度值来调用类名称：text-blue-500，bg-blue-500一直。否则，将不会使用该样式。

当我不指定500不透明度时，如何使其自动选择？更清楚地说，我只想在不需要透明度的情况下指定以下内容：text-blue，bg-blue。

我找到了this question，但由于我没有为该类使用任何自定义名称，因此我认为它与我的情况不符。

请先查看我的顺风配置和我的组件之一，谢谢！ tailwind.config.js

/*
 ** TailwindCSS Configuration File
 **
 ** Docs: https://tailwindcss.com/docs/configuration
 ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 */
module.exports = {
  important: true,theme: {
    // compatible with @nuxtjs/color-mode
    darkSelector: '.dark-mode',extend: {
      colors: {
        // all colors were generated from here: https://hihayk.github.io/scale
        white: 'white',black: '#2C3E50',blue: {
          900: '#052B80',800: '#09369F',700: '#0E43BF',600: '#134FDF',500: '#1A5CFF',400: '#438BFF',300: '#6FB4FF',200: '#9DD5FF',100: '#CDEFFF',},green: {
          900: '#30420A',800: '#315C0F',700: '#287514',600: '#1A8D1D',500: '#21A543',400: '#38B34B',300: '#50C156',200: '#6FCD69',100: '#91D883',orange: {
          900: '#ADA500',800: '#C2B300',700: '#D6C000',600: '#EBCB00',500: '#FFD500',400: '#FFDD32',300: '#FFE464',200: '#FFEB95',100: '#FFF3C7',red: {
          900: '#AD002A',800: '#C20031',700: '#D6003A',600: '#E50043',500: '#EF064D',400: '#FC3273',300: '#FF6498',200: '#FF95BC',100: '#FFC7DD',teal: {
          900: '#007699',800: '#0081A5',700: '#008AB0',600: '#0193B9',500: '#099BC1',400: '#32B9D5',300: '#64D2E5',200: '#95E7F1',100: '#C7F6FA',grey: {
          900: '#515F6A',800: '#5C6A76',700: '#667581',600: '#71808C',500: '#7C8B97',400: '#94A3AC',300: '#ADBAC1',200: '#C7D1D6',100: '#E1E7E9',variants: {
    backgroundColor: [
      'dark','dark-hover','dark-group-hover','dark-even','dark-odd',],borderColor: ['dark','dark-focus','dark-focus-within'],textColor: ['dark','dark-active'],plugins: [require('tailwindcss-dark-mode')()],purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',content: [
      'components/**/*.vue','layouts/**/*.vue','pages/**/*.vue','plugins/**/*.js','nuxt.config.js',tailwindcss: {
    // add '~tailwind.config` alias
    exposeConfig: true,}

CircularProgressIndicator.vue

<template>
  <progress class="cpi" :class="[colorClass]" />
</template>

<script lang="ts">
import { Vue,Component,Prop } from 'nuxt-property-decorator'

@Component({ name: 'CircularProgressIndicator' })
export default class CircularProgressIndicator extends Vue {
  @Prop({ type: String,default: null }) public color!: string
  @Prop({ type: String,default: null }) public size!: string

  get colorClass(): string | void {
    // if (this.color) return `text-${this.color}-500` // if i specify it like this,the colors applied
    if (this.color) return `text-${this.color}` // but not this one
  }
}
</script>

<style scoped>
.cpi {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  padding: 0.25em;
  width: 3em;
  height: 3em;
  background-color: transparent;
  overflow: hidden;
  @apply text-base;
  @apply text-blue-500;
}

.cpi::-webkit-progress-bar {
  background-color: transparent;
}

/* Indeterminate */
.cpi:indeterminate {
  -webkit-mask-image: linear-gradient(transparent 50%,black 50%),linear-gradient(to right,transparent 50%,black 50%);
  mask-image: linear-gradient(transparent 50%,black 50%);
  animation: cpi 6s infinite cubic-bezier(0.3,0.6,1,1);
}

.cpi:indeterminate::before,.cpi:indeterminate::-webkit-progress-value {
  content: '';
  display: block;
  box-sizing: border-box;
  margin-bottom: 0.25em;
  border: solid 0.25em transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  width: 100% !important;
  height: 100%;
  background-color: transparent;
  animation: cpi-pseudo 0.75s infinite linear alternate;
}

.cpi:indeterminate::-moz-progress-bar {
  box-sizing: border-box;
  border: solid 0.25em transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  animation: cpi-pseudo 0.75s infinite linear alternate;
}

.cpi:indeterminate::-ms-fill {
  animation-name: -ms-ring;
}

@keyframes cpi {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}

@keyframes cpi-pseudo {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: currentColor;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: currentColor;
  }
  100% {
    border-left-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(225deg);
  }
}
</style>

index.vue

<template>
  <CircularProgressIndicator />
  <CircularProgressIndicator color="green" />
  <CircularProgressIndicator color="red" />
  <CircularProgressIndicator color="teal" />
  <CircularProgressIndicator color="grey" />
</template>

解决方法

似乎您已经接近...应该可以将if（this.color）函数扩展到完整的tst ...但是当前if（this.color）仅在返回true或false的情况下存在颜色...您真的不需要比较哪种颜色？

if（this.color =='blue'|| this.color =='green'）{ 返回xyz }