Badge徽章

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-badge": "/miniprogram_npm/vtuweapp/badge/vtu-badge"
    3. }
    4.

    代码演示

    基础用法

    定义value属性，它接受Number或者String。

    1. <vtu-badge value="15" user-slot>
    2.     <vtu-btn>数字</vtu-btn>
    3. </vtu-badge>
    4. <vtu-badge value="hot" bg-color="#ddd" user-slot>
    5.     <vtu-btn>自定义颜色</vtu-btn>
    6. </vtu-badge>
    7. <vtu-btn>
    8.     不使用插槽
    9.     <vtu-badge value="hot"></vtu-badge>
    10. </vtu-btn>
    11.

    最大值(适用于数字)

    可自定义最大值。

    1. <vtu-badge value="15" max="10" user-slot>
    2.     <vtu-btn>最大10</vtu-btn>
    3. </vtu-badge>
    4. <vtu-badge value="105" max="99" user-slot>
    5.     <vtu-btn>最大99</vtu-btn>
    6. </vtu-badge>
    7.

    小红点

    以红点的形式标注需要关注的内容。

    1. <vtu-badge is-dot="true" user-slot>
    2.     <vtu-btn>按钮</vtu-btn>
    3. </vtu-badge>
    4. <vtu-badge is-dot="true" user-slot>
    5.     未读消息
    6. </vtu-badge>
    7.

    组件参数

    Props

    参数说明类型默认值必填
    value显示值String | Number-否
    max最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型Number-否
    is-dot小圆点Booleanfalse否
    color字体颜色String-否
    bg-color背景色String-否
    top徽章距离顶部距离String-10px否
    right徽章距离右部距离String-否
    user-slot使用插槽Booleanfalse否
    shape形状，bubble：气泡，dot：圆点Stringbubble否

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Badge 徽章 - 图1