element-plus/es/el-badge/index.js

A Component Library for Vue3.0

import { defineComponent, computed, openBlock, createBlock, renderSlot, createVNode, Transition, withCtx, withDirectives, toDisplayString, vShow } from 'vue';

var script = defineComponent({
    name: 'ElBadge',
    props: {
        value: {
            type: [String, Number],
            default: '',
        },
        max: {
            type: Number,
            default: 99,
        },
        isDot: Boolean,
        hidden: Boolean,
        type: {
            type: String,
            default: 'primary',
            validator: (val) => {
                return ['primary', 'success', 'warning', 'info', 'danger'].includes(val);
            },
        },
    },
    setup(props) {
        const content = computed(() => {
            if (props.isDot) {
                return;
            }
            if (typeof props.value === 'number' && typeof props.max === 'number') {
                return props.max < props.value ? `${props.max}+` : props.value;
            }
            return props.value;
        });
        return {
            content,
        };
    },
});

const _hoisted_1 = { class: "el-badge" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock("div", _hoisted_1, [
    renderSlot(_ctx.$slots, "default"),
    createVNode(Transition, { name: "el-zoom-in-center" }, {
      default: withCtx(() => [
        withDirectives(createVNode("sup", {
          class: ["el-badge__content", [
          'el-badge__content--' + _ctx.type,
          {
            'is-fixed': _ctx.$slots.default,
            'is-dot': _ctx.isDot
          }
        ]],
          textContent: toDisplayString(_ctx.content)
        }, null, 10 /* CLASS, PROPS */, ["textContent"]), [
          [vShow, !_ctx.hidden && (_ctx.content || _ctx.content === 0 || _ctx.isDot)]
        ])
      ]),
      _: 1 /* STABLE */
    })
  ]))
}

script.render = render;
script.__file = "packages/badge/src/index.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _Badge = script;

export default _Badge;