ruoyi-miniapp/components/cs-dict-tag/index.vue

<template>
  <view
    :class="[getClass, 'dict-tag']"
    v-if="current.label"
    :style="{ color: color, backgroundColor: bgColor }"
  >
    {{ current.label }}
  </view>
</template>

<script>
export default {
  name: 'cs-dictTag',
  data() {
    return {
      current: {}
    }
  },
  computed: {
    getClass() {
      return this.current?.colorType || 'info'
    }
  },
  props: {
    dict: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    color: {
      type: String
    },
    bgColor: {
      type: String
    },
    value: {
      type: Number,
      required: true
    }
  },
  watch: {
    '$props.value': {
      handler: function (v) {
        if (v) {
          this.getDickObj()
        }
      },
      deep: true,
      immediate: true
    },
    '$props.dict': {
      handler: function (v) {
        if (v) {
          this.getDickObj()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    getDickObj() {
      this.current = this.$props.dict.find(
        i => i.value == this.$props.value
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  color: #17c653;
  background-color: #eafff1;
}
.primary {
  color: $uni-color-primary;
  background-color: rgba($uni-color-primary, 0.2);
}
.warning {
  color: #f6b100;
  background-color: #fff8dd;
}
.error {
  color: #f8285a;
  background-color: #ffeef3;
}
.danger {
  color: #f8285a;
  background-color: #ffeef3;
}
.info {
  background-color: #f1f1f4;
  color: #99a1b7;
}
.dict-tag {
  min-width: 212rpx;
  text-align: center;
  font-size: 24rpx;
  padding: 4rpx 40rpx;
}
</style>