blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(RollingText): allow different digit lengths for start-num and target-num (#12011)

Browse Source
This commit is contained in:
inottn 2023-06-22 21:32:51 +08:00 committed by GitHub
parent 4fa8879ed2
commit 6b8a83eefc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/vant/src/rolling-text/RollingText.tsx
View File

@ -14,6 +14,7 @@ import {
makeNumberProp, makeNumberProp,
makeStringProp, makeStringProp,
truthProp, truthProp,
padZero,
} from '../utils'; } from '../utils';
// Composables // Composables
@ -56,8 +57,12 @@ export default defineComponent({
() => Array.isArray(props.textList) && props.textList.length () => Array.isArray(props.textList) && props.textList.length
); );
const itemLength = computed(() => {
if (isCustomType.value) return props.textList[0].length;
return `${Math.max(props.startNum, props.targetNum!)}`.length;
});
const getTextArrByIdx = (idx: number) => { const getTextArrByIdx = (idx: number) => {
if (!isCustomType.value) return [];
const result = []; const result = [];
for (let i = 0; i < props.textList.length; i++) { for (let i = 0; i < props.textList.length; i++) {
result.push(props.textList[i][idx]); result.push(props.textList[i][idx]);
@ -66,28 +71,19 @@ export default defineComponent({
}; };
const targetNumArr = computed(() => { const targetNumArr = computed(() => {
if (isCustomType.value) if (isCustomType.value) return new Array(itemLength.value).fill('');
return props.textList[props.textList.length - 1].split(''); return padZero(props.targetNum!, itemLength.value).split('');
return `${props.targetNum}`.split('');
}); });
const startNumArr = () => { const startNumArr = computed(() =>
const arr = `${props.startNum}`.split(''); padZero(props.startNum, itemLength.value).split('')
while (arr.length < targetNumArr.value.length) { );
arr.unshift('0');
}
return arr;
};
const getTwoFigure = (i: number) => [
startNumArr()[i],
targetNumArr.value[i],
];
const getFigureArr = (i: number) => { const getFigureArr = (i: number) => {
const [start, target] = getTwoFigure(i); const start = +startNumArr.value[i];
const target = +targetNumArr.value[i];
const result = []; const result = [];
for (let i = +start; i <= 9; i++) { for (let i = start; i <= 9; i++) {
result.push(i); result.push(i);
} }
for (let i = 0; i <= CIRCLE_NUM; i++) { for (let i = 0; i <= CIRCLE_NUM; i++) {
@ -95,7 +91,7 @@ export default defineComponent({
result.push(j); result.push(j);
} }
} }
for (let i = 0; i <= +target; i++) { for (let i = 0; i <= target; i++) {
result.push(i); result.push(i);
} }
return result; return result;
@ -136,7 +132,7 @@ export default defineComponent({
return () => ( return () => (
<div class={bem()}> <div class={bem()}>
{targetNumArr.value.map((figure, i) => ( {targetNumArr.value.map((_, i) => (
<RollingTextItem <RollingTextItem
figureArr={ figureArr={
isCustomType.value ? getTextArrByIdx(i) : getFigureArr(i) isCustomType.value ? getTextArrByIdx(i) : getFigureArr(i)
@ -145,7 +141,7 @@ export default defineComponent({
direction={props.direction} direction={props.direction}
isStart={rolling.value} isStart={rolling.value}
height={props.height} height={props.height}
delay={getDelay(i, targetNumArr.value.length)} delay={getDelay(i, itemLength.value)}
/> />
))} ))}
</div> </div>