154 lines
4.2 KiB
Vue
154 lines
4.2 KiB
Vue
import classNames from 'classnames';
|
|
import PropTypes from '../_util/vue-types';
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
import { getStyle } from '../_util/props-util';
|
|
import omit from 'omit.js';
|
|
import { cloneElement } from '../_util/vnode';
|
|
|
|
function getNumberArray(num) {
|
|
return num
|
|
? num
|
|
.toString()
|
|
.split('')
|
|
.reverse()
|
|
.map(i => Number(i))
|
|
: [];
|
|
}
|
|
|
|
const ScrollNumberProps = {
|
|
prefixCls: PropTypes.string.def('ant-scroll-number'),
|
|
count: PropTypes.any,
|
|
component: PropTypes.string,
|
|
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
|
|
displayComponent: PropTypes.any,
|
|
className: PropTypes.object,
|
|
};
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
props: ScrollNumberProps,
|
|
data() {
|
|
return {
|
|
animateStarted: true,
|
|
sCount: this.count,
|
|
};
|
|
},
|
|
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);
|
|
},
|
|
);
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
getPositionByNum(num, 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 (currentDigit >= lastDigit) {
|
|
return 10 + num;
|
|
}
|
|
return 20 + num;
|
|
}
|
|
if (currentDigit <= lastDigit) {
|
|
return 10 + num;
|
|
}
|
|
return num;
|
|
},
|
|
renderNumberList(position) {
|
|
const childrenToReturn = [];
|
|
for (let i = 0; i < 30; i++) {
|
|
const currentClassName = position === i ? 'current' : '';
|
|
childrenToReturn.push(
|
|
<p key={i.toString()} class={currentClassName}>
|
|
{i % 10}
|
|
</p>,
|
|
);
|
|
}
|
|
return childrenToReturn;
|
|
},
|
|
|
|
renderCurrentNumber(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}%)`,
|
|
};
|
|
return (
|
|
<span class={`${this.prefixCls}-only`} style={style} key={i}>
|
|
{this.renderNumberList(position)}
|
|
</span>
|
|
);
|
|
},
|
|
|
|
renderNumberElement() {
|
|
const { sCount } = this;
|
|
if (!sCount || isNaN(sCount)) {
|
|
return sCount;
|
|
}
|
|
return getNumberArray(sCount)
|
|
.map((num, i) => this.renderCurrentNumber(num, i))
|
|
.reverse();
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { prefixCls, title, component: Tag = 'sup', displayComponent, className } = this;
|
|
if (displayComponent) {
|
|
return cloneElement(displayComponent, {
|
|
class: `${prefixCls}-custom-component`,
|
|
});
|
|
}
|
|
const style = getStyle(this, true);
|
|
// fix https://fb.me/react-unknown-prop
|
|
const restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']);
|
|
const newProps = {
|
|
props: {
|
|
...restProps,
|
|
},
|
|
attrs: {
|
|
title,
|
|
},
|
|
style,
|
|
class: classNames(prefixCls, className),
|
|
};
|
|
// allow specify the border
|
|
// mock border-color by box-shadow for compatible with old usage:
|
|
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
|
|
if (style && style.borderColor) {
|
|
newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
|
|
}
|
|
|
|
return <Tag {...newProps}>{this.renderNumberElement()}</Tag>;
|
|
},
|
|
};
|