我们先看一下组件效果图：

使用代码如下：

<template>
    <div class="badge">
        <ul>
            <li>
                <wt-align>
                    <wt-badge title="" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="" type="primary"></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="1" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="1" type="primary"></wt-badge>
                </wt-align>
            </li>
             <li>
                <wt-align>
                    <wt-badge title="99" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="99+" type="primary"></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="拒绝" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="生效中" type="primary"></wt-badge>
                </wt-align>
            </li>
        </ul>
    </div>
</template>
<script>
import { ref } from 'vue'

import Badge from '@/components/Badge.vue'

export default {
  components: {
    "wt-badge": Badge
  },
  setup () {
    const dashed = ref(true)
    return {
      dashed
    }
  }
}
</script>
<style lang="less" scoped>
 ul {
   li {
     display: block;
     margin: 10px;
   }
 }
</style>

Badge组件接收props参数：

title (类型 String)

设置显示的文本

type (类型 String)

设置显示的文本

默认值 “default”，可选（“default”、“primary”）

bgcolor (类型 String)

设置背景颜色

color (类型 String)

设置文本颜色

默认值 “#fff”

padding (类型 String)

设置组件padding的值

默认值 “0.3”，单位rem

radius (类型 String)

设置组件的圆角，单位rem

默认值 “0.5”

具体的Badge组件源码，请前往github地址获取。

https://github.com/AntJavascript/WidgetUI3.0/blob/master/Badge.vue