feat: update badge
parent
469702da3e
commit
11d700ca9d
|
@ -2,17 +2,12 @@ import PropTypes from '../_util/vue-types';
|
||||||
import ScrollNumber from './ScrollNumber';
|
import ScrollNumber from './ScrollNumber';
|
||||||
import { PresetColorTypes } from '../_util/colors';
|
import { PresetColorTypes } from '../_util/colors';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {
|
import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
|
||||||
initDefaultProps,
|
|
||||||
filterEmpty,
|
|
||||||
getComponentFromProp,
|
|
||||||
getListeners,
|
|
||||||
} from '../_util/props-util';
|
|
||||||
import { cloneElement } from '../_util/vnode';
|
import { cloneElement } from '../_util/vnode';
|
||||||
import getTransitionProps from '../_util/getTransitionProps';
|
import getTransitionProps from '../_util/getTransitionProps';
|
||||||
import isNumeric from '../_util/isNumeric';
|
import isNumeric from '../_util/isNumeric';
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
import { inject } from 'vue';
|
import { inject, Transition } from 'vue';
|
||||||
|
|
||||||
const BadgeProps = {
|
const BadgeProps = {
|
||||||
/** Number to show in badge */
|
/** Number to show in badge */
|
||||||
|
@ -82,8 +77,7 @@ export default {
|
||||||
}
|
}
|
||||||
: { ...numberStyle };
|
: { ...numberStyle };
|
||||||
},
|
},
|
||||||
getBadgeClassName(prefixCls) {
|
getBadgeClassName(prefixCls, children) {
|
||||||
const children = filterEmpty(this.$slots.default && this.$slots.default());
|
|
||||||
const hasStatus = this.hasStatus();
|
const hasStatus = this.hasStatus();
|
||||||
return classNames(prefixCls, {
|
return classNames(prefixCls, {
|
||||||
[`${prefixCls}-status`]: hasStatus,
|
[`${prefixCls}-status`]: hasStatus,
|
||||||
|
@ -127,9 +121,13 @@ export default {
|
||||||
if (!customNode || typeof customNode !== 'object') {
|
if (!customNode || typeof customNode !== 'object') {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
return cloneElement(customNode, {
|
return cloneElement(
|
||||||
style: this.getStyleWithOffset(),
|
customNode,
|
||||||
});
|
{
|
||||||
|
style: this.getStyleWithOffset(),
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
|
renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
|
||||||
|
@ -158,8 +156,8 @@ export default {
|
||||||
<ScrollNumber
|
<ScrollNumber
|
||||||
prefixCls={scrollNumberPrefixCls}
|
prefixCls={scrollNumberPrefixCls}
|
||||||
data-show={!hidden}
|
data-show={!hidden}
|
||||||
v-show={!hidden}
|
vShow={!hidden}
|
||||||
className={scrollNumberCls}
|
class={scrollNumberCls}
|
||||||
count={displayCount}
|
count={displayCount}
|
||||||
displayComponent={this.renderDispayComponent()}
|
displayComponent={this.renderDispayComponent()}
|
||||||
title={this.getScrollNumberTitle()}
|
title={this.getScrollNumberTitle()}
|
||||||
|
@ -177,15 +175,14 @@ export default {
|
||||||
status,
|
status,
|
||||||
text,
|
text,
|
||||||
color,
|
color,
|
||||||
$slots,
|
|
||||||
} = this;
|
} = this;
|
||||||
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
||||||
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
|
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
|
||||||
|
|
||||||
const children = filterEmpty($slots.default && $slots.default());
|
const children = getSlot(this);
|
||||||
let count = getComponentFromProp(this, 'count');
|
let count = getComponent(this, 'count');
|
||||||
if (Array.isArray(count)) {
|
if (Array.isArray(count)) {
|
||||||
count = count[0];
|
count = count[0];
|
||||||
}
|
}
|
||||||
|
@ -206,11 +203,7 @@ export default {
|
||||||
const styleWithOffset = this.getStyleWithOffset();
|
const styleWithOffset = this.getStyleWithOffset();
|
||||||
const statusTextColor = styleWithOffset && styleWithOffset.color;
|
const statusTextColor = styleWithOffset && styleWithOffset.color;
|
||||||
return (
|
return (
|
||||||
<span
|
<span class={this.getBadgeClassName(prefixCls, children)} style={styleWithOffset}>
|
||||||
{...{ on: getListeners(this) }}
|
|
||||||
class={this.getBadgeClassName(prefixCls)}
|
|
||||||
style={styleWithOffset}
|
|
||||||
>
|
|
||||||
<span class={statusCls} style={statusStyle} />
|
<span class={statusCls} style={statusStyle} />
|
||||||
<span style={{ color: statusTextColor }} class={`${prefixCls}-status-text`}>
|
<span style={{ color: statusTextColor }} class={`${prefixCls}-status-text`}>
|
||||||
{text}
|
{text}
|
||||||
|
@ -222,9 +215,9 @@ export default {
|
||||||
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
|
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span {...{ on: getListeners(this) }} class={this.getBadgeClassName(prefixCls)}>
|
<span class={this.getBadgeClassName(prefixCls, children)}>
|
||||||
{children}
|
{children}
|
||||||
<transition {...transitionProps}>{scrollNumber}</transition>
|
<Transition {...transitionProps}>{scrollNumber}</Transition>
|
||||||
{statusText}
|
{statusText}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
import { getStyle } from '../_util/props-util';
|
|
||||||
import omit from 'omit.js';
|
import omit from 'omit.js';
|
||||||
import { cloneElement } from '../_util/vnode';
|
import { cloneElement } from '../_util/vnode';
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
import { inject } from 'vue';
|
import { inject } from 'vue';
|
||||||
|
import syncWatch from '../_util/syncWatch';
|
||||||
|
|
||||||
function getNumberArray(num) {
|
function getNumberArray(num) {
|
||||||
return num
|
return num
|
||||||
|
@ -26,11 +26,12 @@ const ScrollNumberProps = {
|
||||||
component: PropTypes.string,
|
component: PropTypes.string,
|
||||||
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
|
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
|
||||||
displayComponent: PropTypes.any,
|
displayComponent: PropTypes.any,
|
||||||
className: PropTypes.object,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'ScrollNumber',
|
||||||
mixins: [BaseMixin],
|
mixins: [BaseMixin],
|
||||||
|
inheritAttrs: false,
|
||||||
props: ScrollNumberProps,
|
props: ScrollNumberProps,
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
|
@ -38,18 +39,19 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
this.lastCount = undefined;
|
||||||
return {
|
return {
|
||||||
animateStarted: true,
|
animateStarted: true,
|
||||||
sCount: this.count,
|
sCount: this.count,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
count() {
|
count: syncWatch(function() {
|
||||||
this.lastCount = this.sCount;
|
this.lastCount = this.sCount;
|
||||||
this.setState({
|
this.setState({
|
||||||
animateStarted: true,
|
animateStarted: true,
|
||||||
});
|
});
|
||||||
},
|
}),
|
||||||
},
|
},
|
||||||
updated() {
|
updated() {
|
||||||
const { animateStarted, count } = this;
|
const { animateStarted, count } = this;
|
||||||
|
@ -157,31 +159,22 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const { prefixCls: customizePrefixCls, title, component: Tag = 'sup', displayComponent } = this;
|
||||||
prefixCls: customizePrefixCls,
|
|
||||||
title,
|
|
||||||
component: Tag = 'sup',
|
|
||||||
displayComponent,
|
|
||||||
className,
|
|
||||||
} = this;
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
|
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
|
||||||
|
const { class: className, style = {} } = this.$attrs;
|
||||||
if (displayComponent) {
|
if (displayComponent) {
|
||||||
return cloneElement(displayComponent, {
|
return cloneElement(displayComponent, {
|
||||||
class: `${prefixCls}-custom-component`,
|
class: `${prefixCls}-custom-component`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const style = getStyle(this, true);
|
|
||||||
// fix https://fb.me/react-unknown-prop
|
// fix https://fb.me/react-unknown-prop
|
||||||
const restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']);
|
const restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']);
|
||||||
|
const tempStyle = { ...style };
|
||||||
const newProps = {
|
const newProps = {
|
||||||
props: {
|
...restProps,
|
||||||
...restProps,
|
title,
|
||||||
},
|
style: tempStyle,
|
||||||
attrs: {
|
|
||||||
title,
|
|
||||||
},
|
|
||||||
style,
|
|
||||||
class: classNames(prefixCls, className),
|
class: classNames(prefixCls, className),
|
||||||
};
|
};
|
||||||
// allow specify the border
|
// allow specify the border
|
||||||
|
|
|
@ -1,24 +0,0 @@
|
||||||
## API
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a-badge :count="5">
|
|
||||||
<a href="#" class="head-example" />
|
|
||||||
</a-badge>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a-badge :count="5" />
|
|
||||||
```
|
|
||||||
|
|
||||||
| 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` | |
|
|
Loading…
Reference in New Issue