更新记录

1.0.2（2024-06-21）

适配r-config-provider

1.0.1（2024-06-17）

修改插件依赖

1.0.0（2024-06-17）

first

平台兼容性

r-badge

r-badge徽标组件，可在右上角展示徽标数字或小红点。

示例

<!-- 基础用法 -->
<r-badge :content="5" >
    <div class="child" />
</r-badge>

<r-badge :content="10" :offset="['10rpx', '10rpx']">
    <div class="child" />
</r-badge>

<r-badge content="Hot">
    <div class="child" />
</r-badge>

<r-badge dot>
    <div class="child" />
</r-badge>

<!-- 最大值 -->
<r-badge :content="20" max="9">
    <div class="child" />
</r-badge>

<r-badge :content="50" max="20">
    <div class="child" />
</r-badge>

<r-badge :content="200" max="99">
    <div class="child" />
</r-badge>

<!-- 自定义颜色 -->
<r-badge :content="5" color="#1989fa">
    <div class="child" />
</r-badge>

<r-badge :content="10" color="#1989fa">
    <div class="child" />
</r-badge>

<r-badge dot color="#1989fa">
    <div class="child" />
</r-badge>

<!-- 自定义徽标内容 -->
<r-badge>
    <div class="child" />
    <template #content>
      <r-icon
        name="icon-success"
        color="#fff"
        prefix="iconfont"
        size="32rpx"
        class="r-badge-icon"
      />
    </template>
</r-badge>

<r-badge>
    <div class="child" />
    <template #content>
      <r-icon
        name="icon-fail"
        color="#fff"
        prefix="iconfont"
        size="32rpx"
        class="r-badge-icon"
      />
    </template>
</r-badge>

<r-badge>
    <div class="child" />
    <template #content>
      <r-icon
        name="icon-smile"
        color="#fff"
        prefix="iconfont"
        size="32rpx"
        class="r-badge-icon"
      />
    </template>
</r-badge>

<!-- 自定义徽标位置 -->
<r-badge :content="10" position="top-left">
    <div class="child" />
</r-badge>

<r-badge :content="10" position="bottom-left">
    <div class="child" />
</r-badge>

<r-badge :content="10" position="bottom-right">
    <div class="child" />
</r-badge>

<!-- 独立展示 -->
<r-badge :content="20" />

<r-badge :content="200" max="99" />

API

Props

Slots