平台兼容性

属性 说明 类型 默认值
dot 不展示数字，只有一个小红点，如需隐藏 dot ，需要设置 count 为 0 Boolean false
count 显示的数字，大于 maxCount时，显示 ${maxCount}+，为 0 时隐藏 Number 0
maxCount 展示封顶的数字值 Number 99 
复制代码<template>
  <view class="app">
    <view class="cell">
      <min-badge dot>
        <view class="test"></view>
      </min-badge>
    </view>
    <view class="cell">
      <min-badge count="10" maxCount="9">
        <view class="test"></view>
      </min-badge>
    </view>
    <view class="cell">
      <min-badge count="9">
        <view class="test"></view>
      </min-badge>
    </view>
    <view class="cell">
      <min-badge count="99">
        <view class="test"></view>
      </min-badge>
    </view>
    <view class="cell">
      <min-badge count="100">
        <view class="test"></view>
      </min-badge>
    </view>
  </view>
</template>

<script>
import minBadge from '@/components/min-badge/min-badge'
export default {
  components: {
    minBadge
  }
}
</script>

<style lang="scss" scoped>
  .app {
    padding: 22rpx;
  }
  .cell {
    margin: 22rpx;
  }
  .test {
    width: 100rpx;
    height: 100rpx;
    background: #dddddd;
  }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
745***@qq.com

2023-04-20

好评

luc***@qq.com

2021-03-17

nyszhangyong

2020-10-17

真好用，赞一个

624***@qq.com

2020-10-16

demon_lin

2020-07-29

设置dot, count为0时，红点依然还在，看了一下源码，并无相关处理。 稍微做了一下处理 v-if="dot && count !== 0"

zer***@gmail.com

2020-07-06

简约，好用

781***@qq.com

2020-05-14

方块来个背景会更完美

yej***@gmail.com

2020-04-12

好用

工作人员

2020-04-10

报错信息 ：Invalid prop: type check failed for prop "count". Expected Number with value 100, got String with value "100". 把第27行改为： return Number(this.count) > Number(this.maxCount) ? ${Number(this.maxCount)}+ : Number(this.count)

857***@qq.com

2020-03-14

加载更多...
插件问答

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问