徽章 Badge

出现在按钮、图标旁的数字或文字标记。

显示徽标

通过设置show属性设置是否显示徽标。默认值为true。

示例代码

<l-badge value="10" show="{{true}}">
  <!-- 插槽内的内容位于徽标左下角 -->
  <image src="/images/icon.png" />
</l-badge>

数字徽标

通过value属性设置徽标内显示的内容。

通过mode属性设置徽标内显示的内容类型，可选值为number、text，默认值为number。

示例代码

<l-badge value="10">
  <!-- 插槽内的内容位于徽标左下角 -->
  <image src="/images/icon.png" />
</l-badge>
<l-badge value="文字" mode="text">
  <image src="/images/icon.png" />
</l-badge>

徽标形状

通过shape属性设置徽标形状，可选值为circle、horn，默认值为horn。

示例代码

<l-badge value="10" shape="circle">
  <!-- 插槽内的内容位于徽标左下角 -->
  <image src="/images/icon.png" />
</l-badge>

数字显示方式

通过number-type属性设置徽标内数字的显示方式。可选值为overflow、ellipsis、limit,默认值为overflow。

• 设置number-type为overflow，超过max-count会显示为${max-count}+。通过max-count属性修改数字最大值，max-count默认值为99。
• 设置number-type为ellipsis，超过max-count会显示为...。通过max-count属性修改数字最大值，max-count默认值为99。
• 设置number-type为limit时数字大于1000显示为${value/1000}k。

示例代码

<l-badge value="100" max-count="99">
  <image src="/images/icon.png" />
</l-badge>
<l-badge value="1200" number-type="limit">
  <image src="/images/icon.png" />
</l-badge>

自定义徽标内容

可在微信小程序项目内的wxs文件中自定义内容格式化函数,具体用法可参考以下示例代码。Lin-UI也提供了内置的wxs格式化函数，具体用法参考Lin-UI的filter文档。

示例代码

<wxs src="../index.wxs" module="count" />
<l-badge value="count.overCount(100)">
  <image src="/images/icon.png" />
</l-badge>

//wxs文件
var countFlow = function(count) {
  if (count > 99) {
    var finalCount = '99++'
  }
  return finalCount
}
module.exports = {
  overCount: overCount
};

红点徽标

通过dot属性设置徽标为红点徽标。

TIP

dot属性权重大于value属性。

示例代码

<l-badge dot="{{true}}">
  <image src="/images/icon.png" />
</l-badge>

徽标属性（Badge Attributes）

徽标外部样式类 (Badge ExternalClasses)

徽标插槽 (Badge Slot)

徽标事件（Badge Events）