Tuniao UI Uniapp V3TnBadge-徽标
该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字、图标两种形式。
组件位置
typescript
import TnBadge from '@tuniao/tnui-vue3-uniapp/components/badge/src/badge.vue'import TnBadge from '@tuniao/tnui-vue3-uniapp/components/badge/src/badge.vue'typescript
import TnBadge from '@/uni_modules/tuniaoui-vue3/components/badge/src/badge.vue'import TnBadge from '@/uni_modules/tuniaoui-vue3/components/badge/src/badge.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
支持两种方式使用角标
- 嵌套在组件内部进行使用，前提是当前组件必须有
position属性 - 将内容嵌套在
TnBadge组件内部
vue
<view style="position: relative;">
<TnBadge value="99" type="primary" />
</view><view style="position: relative;">
<TnBadge value="99" type="primary" />
</view>vue
<TnBadge value="99" type="primary">
<view class="content">content</view>
</TnBadge><TnBadge value="99" type="primary">
<view class="content">content</view>
</TnBadge>- 通过
value参数设置徽标的值，当不设置或者值为或''时，徽标不显示。 type值可选的有primary、success、warning、danger、info，默认为primary，即默认徽标- 通过
size参数来修改徽标的大小，可选值为lg、xl，也可以传递指定的大小尺寸，默认单位为 rpx，接受传入带单位的参数 - 通过
bg-color设置徽标背景颜色 - 通过
text-color设置徽标背景颜色 - 通过
font-size设置徽标字体大小
vue
<TnBadge value="99" type="primary" />
<TnBadge value="99" type="success" />
<TnBadge value="99" type="warning" />
<TnBadge value="99" type="danger" />
<TnBadge value="99" type="info" /><TnBadge value="99" type="primary" />
<TnBadge value="99" type="success" />
<TnBadge value="99" type="warning" />
<TnBadge value="99" type="danger" />
<TnBadge value="99" type="info" />vue
<TnBadge value="99" bg-color="tn-blue" text-color="tn-white" />
<TnBadge value="99" bg-color="gradient__cool-6" text-color="#fff" />
<TnBadge value="99" bg-color="#01beff" text-color="rgb(255, 255, 255)" /><TnBadge value="99" bg-color="tn-blue" text-color="tn-white" />
<TnBadge value="99" bg-color="gradient__cool-6" text-color="#fff" />
<TnBadge value="99" bg-color="#01beff" text-color="rgb(255, 255, 255)" />vue
<TnBadge value="99" type="primary" size="20" />
<TnBadge value="99" type="primary" size="20px" />
<TnBadge value="99" type="primary" size="lg" />
<TnBadge value="icon-logo-tuniao" type="primary" size="40" font-size="50" /><TnBadge value="99" type="primary" size="20" />
<TnBadge value="99" type="primary" size="20px" />
<TnBadge value="99" type="primary" size="lg" />
<TnBadge value="icon-logo-tuniao" type="primary" size="40" font-size="50" />图标角标
通过设置value的值为icon-开头时使用TnIcon作为图标进行显示，具体图标查看 此时设置size属性为具体值的时候是设置角标的宽高属性
vue
<TnBadge value="icon-logo-tuniao" />
<TnBadge value="icon-logo-tuniao" size="60" /><TnBadge value="icon-logo-tuniao" />
<TnBadge value="icon-logo-tuniao" size="60" />设置角标最大值
通过max参数可以设置角标显示的最大值，当超过最大值时，显示max+max参数在value为number类型下有效
vue
<TnBadge :value="200" :max="99" /><TnBadge :value="200" :max="99" />设置点角标
通过设置dot参数为true时，显示点角标 此时设置size属性为具体值的时候是设置角标的宽高属性
vue
<TnBadge dot /><TnBadge dot />设置固定位置的角标
通过设置absolute参数为true时，可以将角标固定在容器的右上角 可以通过设置absolute-config和absolute-center参数来设置角标的位置
vue
<TnBadge
value="99"
absolute
:absolute-config="{ top: '10%'; }"
absolute-center
/><TnBadge
value="99"
absolute
:absolute-config="{ top: '10%'; }"
absolute-center
/>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| value | 徽标内容，可以是数字或者字符串，当为数字时，超过 max 会显示{max}+，以 icon-开头则显示图标 | String | Number | - | - |
| max | 徽标内容最大值，在 value 为 number 时有效，超过最大值会显示{max}+ | String | Number | - | - |
| type | 徽标颜色类型，设置徽标颜色为主题色 | String | primary | primary / success / warning / danger / info |
| bg-color | 徽标背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | - | - |
| text-color | 徽标字体颜色，可以使用图鸟内置的字体色、hex、rgb、rgba | String | - | - |
| size | 徽标尺寸，可以使用可选值和指定的尺寸大小 | String | Number | - | lg / xl |
| font-size | 徽标字体大小 | String | Number | - | - |
| bold | 徽标字体是否加粗 | Boolean | false | true |
| custom-style | 自定义样式 | Object | - | - |
| custom-class | 自定义类名 | String | - | - |
| dot | 是否显示点徽标 | Boolean | false | true |
| absolute | 是否绝对定位徽标 | Boolean | false | true |
| absolute-position | 绝对定位的位置信息 | BadgeAbsolutePositionConfig | {} | - |
| absolute-center | 角标是否居中显示，在absolute为true时生效 | Boolean | false | true |
| index | 点击徽标时的标识 | String | Number | - | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 徽标点击事件 | () => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
BadgeAbsolutePositionConfig
| 参数 | 说明 | 必填 |
|---|---|---|
| top | 距离顶部的位置 | - |
| right | 距离右边的位置 | - |