@fesjs/fes-design/es/badge/badge.js

fes-design for PC

import { defineComponent, computed, createVNode } from 'vue';
import { isNumber, isString } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
import { badgeProps } from './props';

const prefixCls = getPrefixCls('badge');
var badge = defineComponent({
  name: 'FBadge',
  props: badgeProps,
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    useTheme();
    // 展示内容
    const badgeValue = computed(() => {
      if (props.dot) {
        return '';
      }
      // 只有在 value 是数值类型，才生效 超过阈值展示阈值+
      if (isNumber(props.value) && props.value > props.max) {
        return `${props.max}+`;
      }
      return props.value;
    });
    const showBadge = () => {
      // 如果是 hidden ，直接 false，不展示
      if (props.hidden) {
        return false;
      }
      // 有插槽就直接展示自定义插槽内容
      return slots.content || props.dot || isString(props.value) || props.value === 0 && props.showZero || props.value !== 0 && isNumber(props.value);
    };

    // 样式
    const badgeClassList = computed(() => {
      return [`${prefixCls}-sup`, `${prefixCls}-sup-type-${props.type}`, props.dot ? `${prefixCls}-sup-dot` : '', props.size === 'small' ? `${prefixCls}-sup-size-small` : '', !slots.default ? `${prefixCls}-sup-alone` : ''].filter(Boolean);
    });
    const badgeStyle = computed(() => {
      return props.backgroundColor ? {
        backgroundColor: props.backgroundColor
      } : {};
    });
    return () => {
      var _slots$default, _slots$content, _slots$content2;
      return createVNode("div", {
        "class": prefixCls
      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), showBadge() && createVNode("span", {
        "class": badgeClassList.value,
        "style": badgeStyle.value
      }, [(_slots$content = (_slots$content2 = slots.content) === null || _slots$content2 === void 0 ? void 0 : _slots$content2.call(slots)) !== null && _slots$content !== void 0 ? _slots$content : badgeValue.value])]);
    };
  }
});

export { badge as default };