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

perf(RollingText): standardize namespace and simplify logic (#11993)

Browse Source 
* perf(RollingText): standardize namespace and simplify logic

* chore: update style

* chore: update doc
This commit is contained in:
inottn 2023-06-18 09:53:01 +08:00 committed by GitHub
parent ba6a0e93eb
commit 2418f71274
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 180 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/vant/src/rolling-text/README.md
View File

@ -112,8 +112,8 @@ export default {
--van-rolling-text-color: white; --van-rolling-text-color: white;
--van-rolling-text-font-size: 40px; --van-rolling-text-font-size: 40px;
--van-rolling-text-gap: 6px; --van-rolling-text-gap: 6px;
--van-rolling-text-single-border-radius: 5px; --van-rolling-text-item-border-radius: 5px;
--van-rolling-text-single-width: 50px; --van-rolling-text-item-width: 50px;
} }
``` ```
@ -214,5 +214,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-rolling-text-color | _var(--van-text-color)_ | Color of the number | | --van-rolling-text-color | _var(--van-text-color)_ | Color of the number |
| --van-rolling-text-font-size | _var(--van-font-size-md)_ | Font size of the number | | --van-rolling-text-font-size | _var(--van-font-size-md)_ | Font size of the number |
| --van-rolling-text-gap | _0px_ | Spacing between digits | | --van-rolling-text-gap | _0px_ | Spacing between digits |
| --van-rolling-text-single-width | _15px_ | Width of a single digit | | --van-rolling-text-item-width | _15px_ | Width of a single digit |
| --van-rolling-text-single-border-radius | _0px_ | Border radius of a single digit | | --van-rolling-text-item-border-radius | _0px_ | Border radius of a single digit |

8
packages/vant/src/rolling-text/README.zh-CN.md
View File

@ -112,8 +112,8 @@ export default {
--van-rolling-text-color: white; --van-rolling-text-color: white;
--van-rolling-text-font-size: 40px; --van-rolling-text-font-size: 40px;
--van-rolling-text-gap: 6px; --van-rolling-text-gap: 6px;
--van-rolling-text-single-border-radius: 5px; --van-rolling-text-item-border-radius: 5px;
--van-rolling-text-single-width: 50px; --van-rolling-text-item-width: 50px;
} }
``` ```
@ -214,5 +214,5 @@ rollingTextRef.value?.start();
| --van-rolling-text-color | _var(--van-text-color)_ | 数字颜色 | | --van-rolling-text-color | _var(--van-text-color)_ | 数字颜色 |
| --van-rolling-text-font-size | _var(--van-font-size-md)_ | 字体大小 | | --van-rolling-text-font-size | _var(--van-font-size-md)_ | 字体大小 |
| --van-rolling-text-gap | _0px_ | 数位之间的间隔 | | --van-rolling-text-gap | _0px_ | 数位之间的间隔 |
| --van-rolling-text-single-width | _15px_ | 单个数位宽度 | | --van-rolling-text-item-width | _15px_ | 单个数位宽度 |
| --van-rolling-text-single-border-radius | _0px_ | 单个数位边框圆角 | | --van-rolling-text-item-border-radius | _0px_ | 单个数位边框圆角 |

36
packages/vant/src/rolling-text/RollingTextItem.tsx
View File

@ -5,39 +5,35 @@ import {
createNamespace, createNamespace,
makeNumberProp, makeNumberProp,
makeArrayProp, makeArrayProp,
makeStringProp,
addUnit, addUnit,
} from '../utils'; } from '../utils';
// Types
import { RollingTextDirection } from './types';
export const props = { export const props = {
figureArr: makeArrayProp(), figureArr: makeArrayProp(),
delay: Number, delay: Number,
duration: makeNumberProp(2), duration: makeNumberProp(2),
isStart: Boolean, isStart: Boolean,
direction: String, direction: makeStringProp<RollingTextDirection>('down'),
height: makeNumberProp(40), height: makeNumberProp(40),
}; };
const [name, bem] = createNamespace('rolling-text-item');
export default defineComponent({ export default defineComponent({
name: 'RollSingle', name,
props, props,
setup(props) { setup(props) {
const downConfig = { const newFigureArr = computed(() =>
classNameSpace: 'roll-single-down', props.direction === 'down'
aniClass: 'van-roll-single-down__ani', ? props.figureArr.slice().reverse()
dataHandle: () => props.figureArr.slice().reverse(), : props.figureArr
}; );
const upConfig = {
classNameSpace: 'roll-single-up',
aniClass: 'van-roll-single-up__ani',
dataHandle: () => props.figureArr,
};
const directionConfig = props.direction === 'down' ? downConfig : upConfig;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, bem] = createNamespace(directionConfig.classNameSpace);
const newFigureArr = computed(directionConfig.dataHandle);
const totalHeight = computed( const totalHeight = computed(
() => props.height * props.figureArr.length - props.height () => props.height * props.figureArr.length - props.height
); );
@ -55,10 +51,8 @@ export default defineComponent({
}); });
return () => ( return () => (
<div style={getStyle()} class={[bem(), 'van-roll-single']}> <div class={bem([props.direction])} style={getStyle()}>
<div <div class={bem('box', { animate: props.isStart })}>
class={[bem('box'), { [directionConfig.aniClass]: props.isStart }]}
>
{Array.isArray(newFigureArr.value) && {Array.isArray(newFigureArr.value) &&
newFigureArr.value.map((figure) => ( newFigureArr.value.map((figure) => (
<div class={bem('item')} style={itemStyleObj}> <div class={bem('item')} style={itemStyleObj}>

4
packages/vant/src/rolling-text/demo/index.vue
View File

@ -182,7 +182,7 @@ const reset = () => {
--van-rolling-text-color: white; --van-rolling-text-color: white;
--van-rolling-text-font-size: 40px; --van-rolling-text-font-size: 40px;
--van-rolling-text-gap: 6px; --van-rolling-text-gap: 6px;
--van-rolling-text-single-border-radius: 5px; --van-rolling-text-item-border-radius: 5px;
--van-rolling-text-single-width: 50px; --van-rolling-text-item-width: 50px;
} }
</style> </style>

31
packages/vant/src/rolling-text/index.less
View File

@ -3,8 +3,8 @@
--van-rolling-text-color: var(--van-text-color); --van-rolling-text-color: var(--van-text-color);
--van-rolling-text-font-size: var(--van-font-size-md); --van-rolling-text-font-size: var(--van-font-size-md);
--van-rolling-text-gap: 0px; --van-rolling-text-gap: 0px;
--van-rolling-text-single-width: 15px; --van-rolling-text-item-width: 15px;
--van-rolling-text-single-border-radius: 0px; --van-rolling-text-item-border-radius: 0px;
} }
.van-rolling-text { .van-rolling-text {
@ -15,11 +15,10 @@
color: var(--van-rolling-text-color); color: var(--van-rolling-text-color);
} }
.van-roll-single-down, .van-rolling-text-item {
.van-roll-single-up {
margin-right: var(--van-rolling-text-gap); margin-right: var(--van-rolling-text-gap);
width: var(--van-rolling-text-single-width); width: var(--van-rolling-text-item-width);
border-radius: var(--van-rolling-text-single-border-radius); border-radius: var(--van-rolling-text-item-border-radius);
background: var(--van-rolling-text-background); background: var(--van-rolling-text-background);
overflow: hidden; overflow: hidden;
@ -29,12 +28,12 @@
&__box { &__box {
overflow: hidden; overflow: hidden;
}
&__ani { &--animate {
animation: van-up var(--van-duration) ease-in-out var(--van-delay); animation: van-up var(--van-duration) ease-in-out var(--van-delay);
animation-iteration-count: 1; animation-iteration-count: 1;
animation-fill-mode: both; animation-fill-mode: both;
}
} }
&__item { &__item {
@ -42,13 +41,13 @@
} }
} }
.van-roll-single-down { .van-rolling-text-item--down {
&__box { .van-rolling-text-item__box {
transform: translateY(var(--van-translate)); transform: translateY(var(--van-translate));
}
&__ani { &--animate {
animation-name: van-down; animation-name: van-down;
}
} }
} }

276
packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap
View File

@ -2,663 +2,663 @@
exports[`should render comp 1`] = ` exports[`should render comp 1`] = `
<div class="van-rolling-text"> <div class="van-rolling-text">
<div style="height: 40px; --van-translate: -1640px; --van-duration: 2s; --van-delay: 0s;" <div class="van-rolling-text-item van-rolling-text-item--down"
class="van-roll-single-down van-roll-single" style="height: 40px; --van-translate: -1640px; --van-duration: 2s; --van-delay: 0s;"
> >
<div class="van-roll-single-down__box van-roll-single-down__ani"> <div class="van-rolling-text-item__box van-rolling-text-item__box--animate">
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
</div> </div>
</div> </div>
<div style="height: 40px; --van-translate: -1680px; --van-duration: 2s; --van-delay: 0.2s;" <div class="van-rolling-text-item van-rolling-text-item--down"
class="van-roll-single-down van-roll-single" style="height: 40px; --van-translate: -1680px; --van-duration: 2s; --van-delay: 0.2s;"
> >
<div class="van-roll-single-down__box van-roll-single-down__ani"> <div class="van-rolling-text-item__box van-rolling-text-item__box--animate">
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
</div> </div>
</div> </div>
<div style="height: 40px; --van-translate: -1720px; --van-duration: 2s; --van-delay: 0.4s;" <div class="van-rolling-text-item van-rolling-text-item--down"
class="van-roll-single-down van-roll-single" style="height: 40px; --van-translate: -1720px; --van-duration: 2s; --van-delay: 0.4s;"
> >
<div class="van-roll-single-down__box van-roll-single-down__ani"> <div class="van-rolling-text-item__box van-rolling-text-item__box--animate">
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
9 9
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
8 8
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
7 7
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
6 6
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
5 5
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
4 4
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
3 3
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
2 2
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
1 1
</div> </div>
<div class="van-roll-single-down__item" <div class="van-rolling-text-item__item"
style="line-height: 40px;" style="line-height: 40px;"
> >
0 0

4
packages/vant/src/rolling-text/test/index.spec.ts
View File

@ -1,8 +1,8 @@
import { RollingText, type RollingTextInstance } from '..'; import { RollingText, type RollingTextInstance } from '..';
import { later, mount } from '../../../test'; import { later, mount } from '../../../test';
const itemWrapperClass = '.van-roll-single-down__box'; const itemWrapperClass = '.van-rolling-text-item__box';
const animationClass = 'van-roll-single-down__ani'; const animationClass = 'van-rolling-text-item__box--animate';
test('should render comp', () => { test('should render comp', () => {
const wrapper = mount(RollingText, { const wrapper = mount(RollingText, {