element-ui element-plus badge - 分析

源代码地址

version:element-plus 1.0.1-beta.0

<template>
  <div class="el-badge">
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- badge内容 -->
    <transition name="el-zoom-in-center">
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        class="el-badge__content"
        :class="[
          'el-badge__content--' + type,
          {
            'is-fixed': $slots.default,
            'is-dot': isDot
          }
        ]"
        v-text="content"
      >
      </sup>
    </transition>
  </div>
</template>

<script lang="ts">
import { computed } from 'vue'

interface IBadgeProps {
  value: string | number
  max: number
  isDot: boolean
  hidden: boolean
  type: string
}

interface IBadgeSetups {
  content: number | string
}
export default {
  name: 'ElBadge',
  props: {
    value: { // 显示值  string 为自定义显示内容
      type: [String, Number],
      default: '',
    },
    max: { // 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
      type: Number,
      default: 99,
    },
    isDot: Boolean, // 小圆点
    hidden: Boolean, // 隐藏 badge
    type: {
      type: String,
      default: 'primary',
      validator: (val: string) => {
        return ['primary', 'success', 'warning', 'info', 'danger'].includes(val)
      },
    },
  },
  setup(props) {
    const content = computed(() => {
      if (props.isDot) {
        return
      }
      const { value, max } = props
      // value 和 max 都是 number 类型 就显示 max+
      if (typeof value === 'number' && typeof max === 'number') {
        return max < value ? `${max}+` : value
      }
      return value
    })
    return {
      content,
    }
  },
}
</script>