fix badge
parent
f100f0deb3
commit
6cc8ce45e6
|
@ -45,14 +45,14 @@ export default {
|
||||||
$slots,
|
$slots,
|
||||||
numberStyle,
|
numberStyle,
|
||||||
} = this
|
} = this
|
||||||
const isDot = dot || status
|
|
||||||
let displayCount = count > overflowCount ? `${overflowCount}+` : count
|
let displayCount = count > overflowCount ? `${overflowCount}+` : count
|
||||||
|
const isZero = displayCount === '0' || displayCount === 0
|
||||||
|
const isDot = (dot && !isZero) || status
|
||||||
// dot mode don't need count
|
// dot mode don't need count
|
||||||
if (isDot) {
|
if (isDot) {
|
||||||
displayCount = ''
|
displayCount = ''
|
||||||
}
|
}
|
||||||
const children = filterEmpty($slots.default)
|
const children = filterEmpty($slots.default)
|
||||||
const isZero = displayCount === '0' || displayCount === 0
|
|
||||||
const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
|
const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
|
||||||
const hidden = (isEmpty || (isZero && !showZero)) && !isDot
|
const hidden = (isEmpty || (isZero && !showZero)) && !isDot
|
||||||
const statusCls = classNames({
|
const statusCls = classNames({
|
||||||
|
@ -62,7 +62,7 @@ export default {
|
||||||
const scrollNumberCls = classNames({
|
const scrollNumberCls = classNames({
|
||||||
[`${prefixCls}-dot`]: isDot,
|
[`${prefixCls}-dot`]: isDot,
|
||||||
[`${prefixCls}-count`]: !isDot,
|
[`${prefixCls}-count`]: !isDot,
|
||||||
[`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
|
[`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
|
||||||
[`${prefixCls}-status-${status}`]: !!status,
|
[`${prefixCls}-status-${status}`]: !!status,
|
||||||
})
|
})
|
||||||
const badgeCls = classNames(prefixCls, {
|
const badgeCls = classNames(prefixCls, {
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
<us>
|
<us>
|
||||||
#### Red badge
|
#### Red badge
|
||||||
This will simply display a red badge, without a specific count.
|
This will simply display a red badge, without a specific count.
|
||||||
|
If count equals 0, it won't display the dot.
|
||||||
</us>
|
</us>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
@ -14,6 +15,9 @@ This will simply display a red badge, without a specific count.
|
||||||
<a-badge dot>
|
<a-badge dot>
|
||||||
<a-icon type="notification" />
|
<a-icon type="notification" />
|
||||||
</a-badge>
|
</a-badge>
|
||||||
|
<a-badge :count="0" dot>
|
||||||
|
<a-icon type="notification" />
|
||||||
|
</a-badge>
|
||||||
<a-badge dot>
|
<a-badge dot>
|
||||||
<a href="#">Link something</a>
|
<a href="#">Link something</a>
|
||||||
</a-badge>
|
</a-badge>
|
||||||
|
|
|
@ -113,7 +113,9 @@
|
||||||
top: auto;
|
top: auto;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
transform: none !important;
|
}
|
||||||
|
&-not-a-wrapper .@{badge-prefix-cls}-count {
|
||||||
|
transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue