| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 2 | <text |
| 3 | v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)" | |
| 4 | :class="[isDot ? 'u-badge--dot' : 'u-badge--not-dot', inverted && 'u-badge--inverted', shape === 'horn' && 'u-badge--horn', `u-badge--${type}${inverted ? '--inverted' : ''}`]" | |
| 5 | :style="[$u.addStyle(customStyle), badgeStyle]" | |
| 6 | class="u-badge" | |
| 7 | >{{ isDot ? '' :showValue }}</text> | |
| 8 | </template> | |
| 9 | ||
| 10 | <script> | |
| 11 | import props from './props.js'; | |
| 12 | /** | |
| 13 | * badge 徽标数 | |
| 14 | * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。 | |
| 15 | * @tutorial https://uviewui.com/components/badge.html | |
| 16 | * | |
| 17 | * @property {Boolean} isDot 是否显示圆点 （默认 false ） | |
| 18 | * @property {String | Number} value 显示的内容 | |
| 19 | * @property {Boolean} show 是否显示 （默认 true ） | |
| 20 | * @property {String | Number} max 最大值，超过最大值会显示 '{max}+' （默认999） | |
| 21 | * @property {String} type 主题类型，error|warning|success|primary （默认 'error' ） | |
| 22 | * @property {Boolean} showZero 当数值为 0 时，是否展示 Badge （默认 false ） | |
| 23 | * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效 | |
| 24 | * @property {String} color 字体颜色 （默认 '#ffffff' ） | |
| 25 | * @property {String} shape 徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ） | |
| 26 | * @property {String} numberType 设置数字的显示方式，overflow|ellipsis|limit （默认 'overflow' ） | |
| 27 | * @property {Array}} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 | |
| 28 | * @property {Boolean} inverted 是否反转背景和字体颜色（默认 false ） | |
| 29 | * @property {Boolean} absolute 是否绝对定位（默认 false ） | |
| 30 | * @property {Object} customStyle 定义需要用到的外部样式 | |
| 31 | * @example <u-badge :type="type" :count="count"></u-badge> | |
| 32 | */ | |
| 33 | export default { | |
| 34 | name: 'u-badge', | |
| 35 | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], | |
| 36 | computed: { | |
| 37 | // 是否将badge中心与父组件右上角重合 | |
| 38 | boxStyle() { | |
| 39 | let style = {}; | |
| 40 | return style; | |
| 41 | }, | |
| 42 | // 整个组件的样式 | |
| 43 | badgeStyle() { | |
| 44 | const style = {} | |
| 45 | if(this.color) { | |
| 46 | style.color = this.color | |
| 47 | } | |
| 48 | if (this.bgColor && !this.inverted) { | |
| 49 | style.backgroundColor = this.bgColor | |
| 50 | } | |
| 51 | if (this.absolute) { | |
| 52 | style.position = 'absolute' | |
| 53 | // 如果有设置offset参数 | |
| 54 | if(this.offset.length) { | |
| 55 | // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top | |
| 56 | const top = this.offset[0] | |
| 57 | const right = this.offset[1] || top | |
| 58 | style.top = uni.$u.addUnit(top) | |
| 59 | style.right = uni.$u.addUnit(right) | |
| 60 | } | |
| 61 | } | |
| 62 | return style | |
| 63 | }, | |
| 64 | showValue() { | |
| 65 | switch (this.numberType) { | |
| 66 | case "overflow": | |
| 67 | return Number(this.value) > Number(this.max) ? this.max + "+" : this.value | |
| 68 | break; | |
| 69 | case "ellipsis": | |
| 70 | return Number(this.value) > Number(this.max) ? "..." : this.value | |
| 71 | break; | |
| 72 | case "limit": | |
| 73 | return Number(this.value) > 999 ? Number(this.value) >= 9999 ? | |
| 74 | Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value / | |
| 75 | 1e3 * 100) / 100 + "k" : this.value | |
| 76 | break; | |
| 77 | default: | |
| 78 | return Number(this.value) | |
| 79 | } | |
| 80 | }, | |
| 81 | } | |
| 82 | } | |
| 83 | </script> | |
| 84 | ||
| 85 | <style lang="scss" scoped> | |
| 86 | @import "../../libs/css/components.scss"; | |
| 87 | ||
| 88 | $u-badge-primary: $u-primary !default; | |
| 89 | $u-badge-error: $u-error !default; | |
| 90 | $u-badge-success: $u-success !default; | |
| 91 | $u-badge-info: $u-info !default; | |
| 92 | $u-badge-warning: $u-warning !default; | |
| 93 | $u-badge-dot-radius: 100px !default; | |
| 94 | $u-badge-dot-size: 8px !default; | |
| 95 | $u-badge-dot-right: 4px !default; | |
| 96 | $u-badge-dot-top: 0 !default; | |
| 97 | $u-badge-text-font-size: 11px !default; | |
| 98 | $u-badge-text-right: 10px !default; | |
| 99 | $u-badge-text-padding: 2px 5px !default; | |
| 100 | $u-badge-text-align: center !default; | |
| 101 | $u-badge-text-color: #FFFFFF !default; | |
| 102 | ||
| 103 | .u-badge { | |
| 104 | border-top-right-radius: $u-badge-dot-radius; | |
| 105 | border-top-left-radius: $u-badge-dot-radius; | |
| 106 | border-bottom-left-radius: $u-badge-dot-radius; | |
| 107 | border-bottom-right-radius: $u-badge-dot-radius; | |
| 108 | @include flex; | |
| 109 | line-height: $u-badge-text-font-size; | |
| 110 | text-align: $u-badge-text-align; | |
| 111 | font-size: $u-badge-text-font-size; | |
| 112 | color: $u-badge-text-color; | |
| 113 | ||
| 114 | &--dot { | |
| 115 | height: $u-badge-dot-size; | |
| 116 | width: $u-badge-dot-size; | |
| 117 | } | |
| 118 | ||
| 119 | &--inverted { | |
| 120 | font-size: 13px; | |
| 121 | } | |
| 122 | ||
| 123 | &--not-dot { | |
| 124 | padding: $u-badge-text-padding; | |
| 125 | } | |
| 126 | ||
| 127 | &--horn { | |
| 128 | border-bottom-left-radius: 0; | |
| 129 | } | |
| 130 | ||
| 131 | &--primary { | |
| 132 | background-color: $u-badge-primary; | |
| 133 | } | |
| 134 | ||
| 135 | &--primary--inverted { | |
| 136 | color: $u-badge-primary; | |
| 137 | } | |
| 138 | ||
| 139 | &--error { | |
| 140 | background-color: $u-badge-error; | |
| 141 | } | |
| 142 | ||
| 143 | &--error--inverted { | |
| 144 | color: $u-badge-error; | |
| 145 | } | |
| 146 | ||
| 147 | &--success { | |
| 148 | background-color: $u-badge-success; | |
| 149 | } | |
| 150 | ||
| 151 | &--success--inverted { | |
| 152 | color: $u-badge-success; | |
| 153 | } | |
| 154 | ||
| 155 | &--info { | |
| 156 | background-color: $u-badge-info; | |
| 157 | } | |
| 158 | ||
| 159 | &--info--inverted { | |
| 160 | color: $u-badge-info; | |
| 161 | } | |
| 162 | ||
| 163 | &--warning { | |
| 164 | background-color: $u-badge-warning; | |
| 165 | } | |
| 166 | ||
| 167 | &--warning--inverted { | |
| 168 | color: $u-badge-warning; | |
| 169 | } | |
| 170 | } | |
| 171 | </style> | |
