简介

在右上角展示徽标数字或小红点。

布局

由于当前组件相对简单，不做过多的展开探讨。

源码

核心代码，不展开，Vant Badge组件源码

const renderBadge = () => {
  if (hasContent() || props.dot) {
    return (
      <div
        class={bem({ dot: props.dot, fixed: !!slots.default })}
        style={{ background: props.color }}
      >
        {renderContent()}
      </div>
    );
  }
};
    
<tag class={bem('wrapper')}>
    // 组价包含的 内部元素或组件
    {slots.default()}
    // 获取badge渲染部分
    {renderBadge()}
</tag>