uni-halo/.agents/skills/uniapp-project/examples/uni-ui/uni-badge.vue

<!--
uni-badge 数字角标组件示例

官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-badge
-->

<template>
  <view class="container">
    <uni-card is-full :is-shadow="false">
      <text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
    </uni-card>
    
    <!-- 基础用法 -->
    <uni-section title="基础用法" type="line" padding>
      <view class="example-body">
        <uni-badge class="uni-badge-left-margin" text="1" />
        <uni-badge class="uni-badge-left-margin" text="2" type="primary" />
        <uni-badge class="uni-badge-left-margin" text="34" type="success" />
        <uni-badge class="uni-badge-left-margin" text="45" type="warning" />
        <uni-badge class="uni-badge-left-margin" text="123" type="info" />
      </view>
    </uni-section>
    
    <!-- 无底色 -->
    <uni-section title="无底色" type="line" padding>
      <view class="example-body">
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
        <uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
      </view>
    </uni-section>
    
    <!-- 自定义样式 -->
    <uni-section title="自定义样式" type="line" padding>
      <view class="example-body">
        <uni-badge 
          class="uni-badge-left-margin" 
          text="2" 
          type="primary" 
          :custom-style="{background: '#4335d6'}"
        />
        <uni-badge 
          class="uni-badge-left-margin" 
          text="2" 
          type="primary" 
          :custom-style="customStyle"
        />
      </view>
    </uni-section>
    
    <!-- 定位: absolute 属性 -->
    <uni-section title="定位: aboslute 属性" sub-title="注：在安卓端不支持 nvue" type="line" padding>
      <uni-badge 
        class="uni-badge-left-margin" 
        :text="value" 
        absolute="rightTop" 
        size="small"
      >
        <view class="box">
          <text class="box-text">右上</text>
        </view>
      </uni-badge>
    </uni-section>
    
    <!-- 偏移: offset 属性(存在 aboslute) -->
    <uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
      <uni-badge 
        class="uni-badge-left-margin" 
        :text="8" 
        absolute="rightTop" 
        :offset="[-3, -3]" 
        size="small"
      >
        <view class="box">
          <text class="box-text">右上</text>
        </view>
      </uni-badge>
    </uni-section>
    
    <!-- 仅显示点: is-dot 属性 -->
    <uni-section title="仅显示点: is-dot 属性" type="line" padding>
      <uni-badge 
        class="uni-badge-left-margin" 
        :is-dot="true" 
        :text="value" 
        absolute="rightTop" 
        size="small"
      >
        <view class="box">
          <text class="box-text">圆点</text>
        </view>
      </uni-badge>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      customStyle: {
        backgroundColor: '#62ed0d',
        color: '#fff'
      }
    }
  },
  mounted() {
    const timer = setInterval(() => {
      if (this.value >= 199) {
        clearInterval(timer)
        return
      }
      this.value++
    }, 100)
  }
}
</script>

<style lang="scss">
/* #ifdef MP-ALIPAY */
.uni-badge {
  margin-left: 20rpx;
}
/* #endif */

.example-body {
  flex-direction: row;
  justify-content: flex-start;
}

.uni-badge-left-margin {
  margin-left: 10px;
}

.uni-badge-absolute {
  margin-left: 40px;
}

.box {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #DCDFE6;
  color: #fff;
  font-size: 12px;
}

.box-text {
  text-align: center;
  color: #fff;
  font-size: 12px;
}
</style>