feat: update badge
tangjinzhou
parent
20d11c891e
commit
0ddb385785
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'back-top', // dev components
|
||||
componentName: 'badge', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import ScrollNumber from './ScrollNumber';
|
||||
import { PresetColorTypes } from '../_util/colors';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
initDefaultProps,
|
||||
|
|
@ -23,12 +24,15 @@ export const BadgeProps = {
|
|||
prefixCls: PropTypes.string,
|
||||
scrollNumberPrefixCls: PropTypes.string,
|
||||
status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
|
||||
color: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
offset: PropTypes.array,
|
||||
numberStyle: PropTypes.object.def({}),
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
function isPresetColor(color) {
|
||||
return PresetColorTypes.indexOf(color) !== -1;
|
||||
}
|
||||
export default {
|
||||
name: 'ABadge',
|
||||
props: initDefaultProps(BadgeProps, {
|
||||
|
|
@ -40,35 +44,6 @@ export default {
|
|||
configProvider: { default: () => ConfigConsumerProps },
|
||||
},
|
||||
methods: {
|
||||
getBadgeClassName(prefixCls) {
|
||||
const { status } = this.$props;
|
||||
const children = filterEmpty(this.$slots.default);
|
||||
return classNames(prefixCls, {
|
||||
[`${prefixCls}-status`]: !!status,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children.length,
|
||||
});
|
||||
},
|
||||
|
||||
isZero() {
|
||||
const numberedDispayCount = this.getNumberedDispayCount();
|
||||
return numberedDispayCount === '0' || numberedDispayCount === 0;
|
||||
},
|
||||
|
||||
isDot() {
|
||||
const { dot, status } = this.$props;
|
||||
const isZero = this.isZero();
|
||||
return (dot && !isZero) || status;
|
||||
},
|
||||
|
||||
isHidden() {
|
||||
const { showZero } = this.$props;
|
||||
const displayCount = this.getDispayCount();
|
||||
const isZero = this.isZero();
|
||||
const isDot = this.isDot();
|
||||
const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
|
||||
return (isEmpty || (isZero && !showZero)) && !isDot;
|
||||
},
|
||||
|
||||
getNumberedDispayCount() {
|
||||
const { overflowCount } = this.$props;
|
||||
const count = this.badgeCount;
|
||||
|
|
@ -104,6 +79,37 @@ export default {
|
|||
}
|
||||
: numberStyle;
|
||||
},
|
||||
getBadgeClassName(prefixCls) {
|
||||
const { status } = this.$props;
|
||||
const children = filterEmpty(this.$slots.default);
|
||||
return classNames(prefixCls, {
|
||||
[`${prefixCls}-status`]: !!status,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children.length,
|
||||
});
|
||||
},
|
||||
hasStatus() {
|
||||
const { status, color } = this.$props;
|
||||
return !!status || !!color;
|
||||
},
|
||||
isZero() {
|
||||
const numberedDispayCount = this.getNumberedDispayCount();
|
||||
return numberedDispayCount === '0' || numberedDispayCount === 0;
|
||||
},
|
||||
|
||||
isDot() {
|
||||
const { dot, status } = this.$props;
|
||||
const isZero = this.isZero();
|
||||
return (dot && !isZero) || this.hasStatus();
|
||||
},
|
||||
|
||||
isHidden() {
|
||||
const { showZero } = this.$props;
|
||||
const displayCount = this.getDispayCount();
|
||||
const isZero = this.isZero();
|
||||
const isDot = this.isDot();
|
||||
const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
|
||||
return (isEmpty || (isZero && !showZero)) && !isDot;
|
||||
},
|
||||
|
||||
renderStatusText(prefixCls) {
|
||||
const { text } = this.$props;
|
||||
|
|
@ -134,7 +140,7 @@ export default {
|
|||
[`${prefixCls}-count`]: !isDot,
|
||||
[`${prefixCls}-multiple-words`]:
|
||||
!isDot && count && count.toString && count.toString().length > 1,
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
[`${prefixCls}-status-${status}`]: this.hasStatus(),
|
||||
};
|
||||
|
||||
return hidden ? null : (
|
||||
|
|
@ -159,6 +165,7 @@ export default {
|
|||
scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
|
||||
status,
|
||||
text,
|
||||
color,
|
||||
$slots,
|
||||
} = this;
|
||||
|
||||
|
|
@ -175,20 +182,28 @@ export default {
|
|||
const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
|
||||
const statusText = this.renderStatusText(prefixCls);
|
||||
const statusCls = classNames({
|
||||
[`${prefixCls}-status-dot`]: !!status,
|
||||
[`${prefixCls}-status-dot`]: this.hasStatus(),
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
[`${prefixCls}-status-${color}`]: isPresetColor(color),
|
||||
});
|
||||
|
||||
const statusStyle = {};
|
||||
if (color && !isPresetColor(color)) {
|
||||
statusStyle.background = color;
|
||||
}
|
||||
// <Badge status="success" />
|
||||
if (!children.length && status) {
|
||||
if (!children.length && this.hasStatus()) {
|
||||
const styleWithOffset = this.getStyleWithOffset();
|
||||
const statusTextColor = styleWithOffset && styleWithOffset.color;
|
||||
return (
|
||||
<span
|
||||
{...{ on: getListeners(this) }}
|
||||
class={this.getBadgeClassName(prefixCls)}
|
||||
style={this.getStyleWithOffset()}
|
||||
style={styleWithOffset}
|
||||
>
|
||||
<span class={statusCls} />
|
||||
<span class={`${prefixCls}-status-text`}>{text}</span>
|
||||
<span class={statusCls} style={statusStyle} />
|
||||
<span style={{ color: statusTextColor }} class={`${prefixCls}-status-text`}>
|
||||
{text}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@ function getNumberArray(num) {
|
|||
.toString()
|
||||
.split('')
|
||||
.reverse()
|
||||
.map(i => Number(i))
|
||||
.map(i => {
|
||||
const current = Number(i);
|
||||
return isNaN(current) ? i : current;
|
||||
})
|
||||
: [];
|
||||
}
|
||||
|
||||
|
|
@ -38,42 +41,38 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
count(val) {
|
||||
if (this.sCount !== val) {
|
||||
this.lastCount = this.sCount;
|
||||
// 复原数字初始位置
|
||||
this.setState(
|
||||
{
|
||||
animateStarted: true,
|
||||
},
|
||||
() => {
|
||||
// 等待数字位置复原完毕
|
||||
// 开始设置完整的数字
|
||||
setTimeout(() => {
|
||||
this.setState(
|
||||
{
|
||||
animateStarted: false,
|
||||
sCount: val,
|
||||
},
|
||||
() => {
|
||||
this.$emit('animated');
|
||||
},
|
||||
);
|
||||
}, 5);
|
||||
},
|
||||
);
|
||||
}
|
||||
count() {
|
||||
this.lastCount = this.sCount;
|
||||
this.setState({
|
||||
animateStarted: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
updated() {
|
||||
const { animateStarted, count } = this;
|
||||
if (animateStarted) {
|
||||
this.setState(
|
||||
{
|
||||
animateStarted: false,
|
||||
sCount: count,
|
||||
},
|
||||
this.onAnimated,
|
||||
);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPositionByNum(num, i) {
|
||||
const { sCount } = this;
|
||||
const currentCount = Math.abs(Number(sCount));
|
||||
const lastCount = Math.abs(Number(this.lastCount));
|
||||
const currentDigit = Math.abs(getNumberArray(sCount)[i]);
|
||||
const lastDigit = Math.abs(getNumberArray(this.lastCount)[i]);
|
||||
|
||||
if (this.animateStarted) {
|
||||
return 10 + num;
|
||||
}
|
||||
const currentDigit = getNumberArray(this.sCount)[i];
|
||||
const lastDigit = getNumberArray(this.lastCount)[i];
|
||||
// 同方向则在同一侧切换数字
|
||||
if (this.sCount > this.lastCount) {
|
||||
if (currentCount > lastCount) {
|
||||
if (currentDigit >= lastDigit) {
|
||||
return 10 + num;
|
||||
}
|
||||
|
|
@ -84,6 +83,10 @@ export default {
|
|||
}
|
||||
return num;
|
||||
},
|
||||
onAnimated() {
|
||||
this.$emit('animated');
|
||||
},
|
||||
|
||||
renderNumberList(position) {
|
||||
const childrenToReturn = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
|
|
@ -94,22 +97,29 @@ export default {
|
|||
</p>,
|
||||
);
|
||||
}
|
||||
|
||||
return childrenToReturn;
|
||||
},
|
||||
|
||||
renderCurrentNumber(prefixCls, num, i) {
|
||||
const position = this.getPositionByNum(num, i);
|
||||
const removeTransition =
|
||||
this.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
|
||||
const style = {
|
||||
transition: removeTransition ? 'none' : undefined,
|
||||
msTransform: `translateY(${-position * 100}%)`,
|
||||
WebkitTransform: `translateY(${-position * 100}%)`,
|
||||
transform: `translateY(${-position * 100}%)`,
|
||||
};
|
||||
if (typeof num === 'number') {
|
||||
const position = this.getPositionByNum(num, i);
|
||||
const removeTransition =
|
||||
this.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
|
||||
const style = {
|
||||
transition: removeTransition ? 'none' : undefined,
|
||||
msTransform: `translateY(${-position * 100}%)`,
|
||||
WebkitTransform: `translateY(${-position * 100}%)`,
|
||||
transform: `translateY(${-position * 100}%)`,
|
||||
};
|
||||
return (
|
||||
<span class={`${prefixCls}-only`} style={style} key={i}>
|
||||
{this.renderNumberList(position)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span class={`${prefixCls}-only`} style={style} key={i}>
|
||||
{this.renderNumberList(position)}
|
||||
<span key="symbol" class={`${prefixCls}-symbol`}>
|
||||
{num}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,6 +16,29 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
|||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colors.md correctly 1`] = `
|
||||
<div>
|
||||
<h4 style="margin-bottom: 16px;">Presets:</h4>
|
||||
<div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-pink"></span><span class="ant-badge-status-text">pink</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-red"></span><span class="ant-badge-status-text">red</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-yellow"></span><span class="ant-badge-status-text">yellow</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-orange"></span><span class="ant-badge-status-text">orange</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-cyan"></span><span class="ant-badge-status-text">cyan</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-green"></span><span class="ant-badge-status-text">green</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-blue"></span><span class="ant-badge-status-text">blue</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-purple"></span><span class="ant-badge-status-text">purple</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-geekblue"></span><span class="ant-badge-status-text">geekblue</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-magenta"></span><span class="ant-badge-status-text">magenta</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-volcano"></span><span class="ant-badge-status-text">volcano</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
|
||||
</div>
|
||||
<h4 style="margin: 16px 0px;">Custom:</h4>
|
||||
<div><span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span> <br> <span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span> <br> <span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span> <br> <span class="ant-badge ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `<div id="components-badge-demo-dot"><span class="ant-badge"><i aria-label="icon: notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter" data-show="true"></sup></span> <span class="ant-badge"><i aria-label="icon: notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><!----></span> <span class="ant-badge"><a href="#">Link something</a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter" data-show="true"></sup></span></div>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/link.md correctly 1`] = `<a href="#"><span class="ant-badge"><span class="head-example"></span><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></a>`;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ exports[`Badge badge should support float number 1`] = `"3.5"`;
|
|||
|
||||
exports[`Badge badge should support float number 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="3.5" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true">3.5</sup></span>`;
|
||||
|
||||
exports[`Badge render correct with negative number 1`] = `<div><span class="ant-badge ant-badge-not-a-wrapper"><sup title="-10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-symbol">-</span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span><span class="ant-badge ant-badge-not-a-wrapper"><sup title="-10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-symbol">-</span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></div>`;
|
||||
|
||||
exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-2100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
|
@ -16,4 +18,4 @@ exports[`Badge should render when count is changed 4`] = `<span class="ant-badge
|
|||
|
||||
exports[`Badge should render when count is changed 5`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="9" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should support offset when count is a ReactNode 1`] = `<span class="ant-badge"><a href="#" class="head-example"></a><span class="custom ant-scroll-number-custom-component" style="color: rgb(245, 34, 45); right: -10px; margin-top: 20px;" data-show="true"></span></span>`;
|
||||
exports[`Badge should support offset when count is a VueNode 1`] = `<span class="ant-badge"><a href="#" class="head-example">head</a><span class="custom ant-scroll-number-custom-component" style="color: rgb(245, 34, 45); right: -10px; margin-top: 20px;" data-show="true"></span></span>`;
|
||||
|
|
|
|||
|
|
@ -109,16 +109,32 @@ describe('Badge', () => {
|
|||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/13694
|
||||
it('should support offset when count is a ReactNode', () => {
|
||||
it('should support offset when count is a VueNode', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Badge count={<span class="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
|
||||
<a href="#" class="head-example" />
|
||||
<a href="#" class="head-example">
|
||||
head
|
||||
</a>
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
// https://github.com/ant-design/ant-design/issues/15799
|
||||
it('render correct with negative number', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Badge count="-10" />
|
||||
<Badge count={-10} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<cn>
|
||||
#### 多彩徽标
|
||||
1.5.0 后新增。我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Colorful Badge
|
||||
New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
<template>
|
||||
<div>
|
||||
<h4 style="margin-bottom: 16px">Presets:</h4>
|
||||
<div>
|
||||
<div v-for="color in colors" :key="color">
|
||||
<a-badge :color="color" :text="color" />
|
||||
</div>
|
||||
</div>
|
||||
<h4 style="margin: 16px 0">Custom:</h4>
|
||||
<div>
|
||||
<a-badge color="#f50" text="#f50" />
|
||||
<br />
|
||||
<a-badge color="#2db7f5" text="#2db7f5" />
|
||||
<br />
|
||||
<a-badge color="#87d068" text="#87d068" />
|
||||
<br />
|
||||
<a-badge color="#108ee9" text="#108ee9" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const colors = [
|
||||
'pink',
|
||||
'red',
|
||||
'yellow',
|
||||
'orange',
|
||||
'cyan',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'geekblue',
|
||||
'magenta',
|
||||
'volcano',
|
||||
'gold',
|
||||
'lime',
|
||||
];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -6,6 +6,7 @@ import Change from './change';
|
|||
import Overflow from './overflow';
|
||||
import Status from './status';
|
||||
import Title from './title';
|
||||
import Colors from './colors';
|
||||
|
||||
import CN from './../index.zh-CN.md';
|
||||
import US from './../index.en_US.md';
|
||||
|
|
@ -42,6 +43,7 @@ export default {
|
|||
<Status />
|
||||
<Change />
|
||||
<Title />
|
||||
<Colors />
|
||||
<api>
|
||||
<CN slot="cn" />
|
||||
<US />
|
||||
|
|
|
|||
|
|
@ -10,14 +10,15 @@
|
|||
<a-badge :count="5" />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| count | Number to show in badge | number\|string \| slot | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
|
||||
| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - |
|
||||
| overflowCount | Max count to show | number | 99 |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
|
||||
| numberStyle | sets the display style of the status `dot` | object | '' |
|
||||
| title | Text to show when hovering over the badge | string | `count` |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Customize Badge dot color | string | - | 1.5.0 |
|
||||
| count | Number to show in badge | number\|string \| slot | | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
|
||||
| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
|
||||
| numberStyle | sets the display style of the status `dot` | object | '' | |
|
||||
| title | Text to show when hovering over the badge | string | `count` | |
|
||||
|
|
|
|||
|
|
@ -10,14 +10,15 @@
|
|||
<a-badge :count="5" />
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false |
|
||||
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
|
||||
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
|
||||
| numberStyle | 设置状态点的样式 | object | '' |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义小圆点的颜色 | string | - | 1.5.0 |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
|
||||
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
|
||||
| numberStyle | 设置状态点的样式 | object | '' | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
|
||||
|
|
|
|||
Loading…
Reference in New Issue