Vue3从0到1组件开发-系统组件：Badge角标组件

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

唠叨唠叨

说起来，角标这个东西大家应该是随处可见了，像我这种有强迫症的甚至看不得角标的存在。

但凡在我的手机上，我的视线内出现这东西，不点一下我真的觉得都是在为难我自己。

如果小伙伴也有这强迫症，建议克制一下自己适应他的存在，否则太容易导致自己分心了。

说回主题，角标这个东西在如今的开发中已然是贼重要的一个组件了。

所以在组件库中也是常见的不行了，这里肯定是要搞一波的。

先从结构开始

block content
span.yx-badge(
  v-if="dot"
  ref="badge"
)
  slot
  sup.yx-baadge-dot(
    :style="{marginTop: `${offset[0]}px`,marginRight: `${offset[1]}px`}"
    v-show="badge"
  )
span.yx-badge.yx-badge-status(
  v-else-if="status || color"
  ref="badge"
)
  span(
    :class="[status ? `yx-badge-status-${status}` : '', color&&initColorList.includes(color), 'yx-badge-status-dot']"
    :style="backgroundColor: color&&initColorList.includes(color) ? color : ''"
  )
  span.yx-badge-status-text
    slot(name="text") {{ text }}
span.yx-badge(
  v-else
  ref="badge"
)
  slot
  sup(
    v-if="$slot.count"
    :style="{marginTop: `${offset[0]}px`,marginRight: `${offset[1]}px`}"
    :class="['yx-badge-count','yx-badge-count-custom',className ? className : '']"
  )
    slot(name="count")
  sup(
    v-else-if="hasCount" 
    :style="{marginTop: `${offset[0]}px`,marginRight: `${offset[1]}px`}"
    :class="['yx-badge-count','yx-badge-count-custom',className ? className : '']"
  )
    slot(name="text") {{ finalCount }}

因为没有什么交互，数字在业务开发中通过逻辑代码去请求，其他的样式通过结构和css去完善，差不多可以说是全部在这一部分完成了。

逻辑部分主要是展示不同类型的角标。

具体在工作中需要用到什么类型的角标，以及展示方式仍然是有调整空间的。

如果是自己做的角标组件的话，更是可以任意去调整。