hitch-sb-antd/src/components/custom/Badge.vue

<template>
  <a-badge :count="text" :numberStyle="showStyle" />
</template>

<script>
export default {
  name: 'Badge',
  props: {
    text: { // 按钮显示文本
      type: String,
      default: ''
    },
    status: { // 按钮显示文本
      type: String,
      default: 'success'
    },
    numberStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
    }
  },
  computed: {
    showStyle: function () {
      let myShowStyle = { ...{ backgroundColor: '#52c41a' } }
      if (this.status === 'success') {
        myShowStyle = { ...myShowStyle, ...{ backgroundColor: '#52c41a' } }
      }
      if (this.status === 'error') {
        myShowStyle = { ...myShowStyle, ...{ backgroundColor: '#f5222d' } }
      }
      if (this.status === 'default') {
        myShowStyle = { ...myShowStyle, ...{ backgroundColor: '#d9d9d9' } }
      }
      if (this.status === 'processing') {
        myShowStyle = { ...myShowStyle, ...{ backgroundColor: '#1890ff' } }
      }
      if (this.status === 'warning') {
        myShowStyle = { ...myShowStyle, ...{ backgroundColor: '#faad14' } }
      }
      if (this.status === 'gray') {
        myShowStyle = { ...myShowStyle, ...{ backgroundColor: '#7F7D77FF' } }
      }
      myShowStyle = { ...myShowStyle, ...this.numberStyle }
      return myShowStyle
    }
  },
  created () {

  },
  updated: function () {

  }
}
</script>

<style scoped>

</style>