mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
perf(RollingText): standardize namespace and simplify logic (#11993)
* perf(RollingText): standardize namespace and simplify logic * chore: update style * chore: update doc
This commit is contained in:
inottn
GitHub
parent
ba6a0e93eb
commit
2418f71274
@ -112,8 +112,8 @@ export default {
|
||||
--van-rolling-text-color: white;
|
||||
--van-rolling-text-font-size: 40px;
|
||||
--van-rolling-text-gap: 6px;
|
||||
--van-rolling-text-single-border-radius: 5px;
|
||||
--van-rolling-text-single-width: 50px;
|
||||
--van-rolling-text-item-border-radius: 5px;
|
||||
--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-font-size | _var(--van-font-size-md)_ | Font size of the number |
|
||||
| --van-rolling-text-gap | _0px_ | Spacing between digits |
|
||||
| --van-rolling-text-single-width | _15px_ | Width of a single digit |
|
||||
| --van-rolling-text-single-border-radius | _0px_ | Border radius of a single digit |
|
||||
| --van-rolling-text-item-width | _15px_ | Width of a single digit |
|
||||
| --van-rolling-text-item-border-radius | _0px_ | Border radius of a single digit |
|
||||
|
||||
@ -112,8 +112,8 @@ export default {
|
||||
--van-rolling-text-color: white;
|
||||
--van-rolling-text-font-size: 40px;
|
||||
--van-rolling-text-gap: 6px;
|
||||
--van-rolling-text-single-border-radius: 5px;
|
||||
--van-rolling-text-single-width: 50px;
|
||||
--van-rolling-text-item-border-radius: 5px;
|
||||
--van-rolling-text-item-width: 50px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -214,5 +214,5 @@ rollingTextRef.value?.start();
|
||||
| --van-rolling-text-color | _var(--van-text-color)_ | 数字颜色 |
|
||||
| --van-rolling-text-font-size | _var(--van-font-size-md)_ | 字体大小 |
|
||||
| --van-rolling-text-gap | _0px_ | 数位之间的间隔 |
|
||||
| --van-rolling-text-single-width | _15px_ | 单个数位宽度 |
|
||||
| --van-rolling-text-single-border-radius | _0px_ | 单个数位边框圆角 |
|
||||
| --van-rolling-text-item-width | _15px_ | 单个数位宽度 |
|
||||
| --van-rolling-text-item-border-radius | _0px_ | 单个数位边框圆角 |
|
||||
|
||||
@ -5,39 +5,35 @@ import {
|
||||
createNamespace,
|
||||
makeNumberProp,
|
||||
makeArrayProp,
|
||||
makeStringProp,
|
||||
addUnit,
|
||||
} from '../utils';
|
||||
|
||||
// Types
|
||||
import { RollingTextDirection } from './types';
|
||||
|
||||
export const props = {
|
||||
figureArr: makeArrayProp(),
|
||||
delay: Number,
|
||||
duration: makeNumberProp(2),
|
||||
isStart: Boolean,
|
||||
direction: String,
|
||||
direction: makeStringProp<RollingTextDirection>('down'),
|
||||
height: makeNumberProp(40),
|
||||
};
|
||||
|
||||
const [name, bem] = createNamespace('rolling-text-item');
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RollSingle',
|
||||
name,
|
||||
|
||||
props,
|
||||
|
||||
setup(props) {
|
||||
const downConfig = {
|
||||
classNameSpace: 'roll-single-down',
|
||||
aniClass: 'van-roll-single-down__ani',
|
||||
dataHandle: () => props.figureArr.slice().reverse(),
|
||||
};
|
||||
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 newFigureArr = computed(() =>
|
||||
props.direction === 'down'
|
||||
? props.figureArr.slice().reverse()
|
||||
: props.figureArr
|
||||
);
|
||||
const totalHeight = computed(
|
||||
() => props.height * props.figureArr.length - props.height
|
||||
);
|
||||
@ -55,10 +51,8 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div style={getStyle()} class={[bem(), 'van-roll-single']}>
|
||||
<div
|
||||
class={[bem('box'), { [directionConfig.aniClass]: props.isStart }]}
|
||||
>
|
||||
<div class={bem([props.direction])} style={getStyle()}>
|
||||
<div class={bem('box', { animate: props.isStart })}>
|
||||
{Array.isArray(newFigureArr.value) &&
|
||||
newFigureArr.value.map((figure) => (
|
||||
<div class={bem('item')} style={itemStyleObj}>
|
||||
|
||||
@ -182,7 +182,7 @@ const reset = () => {
|
||||
--van-rolling-text-color: white;
|
||||
--van-rolling-text-font-size: 40px;
|
||||
--van-rolling-text-gap: 6px;
|
||||
--van-rolling-text-single-border-radius: 5px;
|
||||
--van-rolling-text-single-width: 50px;
|
||||
--van-rolling-text-item-border-radius: 5px;
|
||||
--van-rolling-text-item-width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
--van-rolling-text-color: var(--van-text-color);
|
||||
--van-rolling-text-font-size: var(--van-font-size-md);
|
||||
--van-rolling-text-gap: 0px;
|
||||
--van-rolling-text-single-width: 15px;
|
||||
--van-rolling-text-single-border-radius: 0px;
|
||||
--van-rolling-text-item-width: 15px;
|
||||
--van-rolling-text-item-border-radius: 0px;
|
||||
}
|
||||
|
||||
.van-rolling-text {
|
||||
@ -15,11 +15,10 @@
|
||||
color: var(--van-rolling-text-color);
|
||||
}
|
||||
|
||||
.van-roll-single-down,
|
||||
.van-roll-single-up {
|
||||
.van-rolling-text-item {
|
||||
margin-right: var(--van-rolling-text-gap);
|
||||
width: var(--van-rolling-text-single-width);
|
||||
border-radius: var(--van-rolling-text-single-border-radius);
|
||||
width: var(--van-rolling-text-item-width);
|
||||
border-radius: var(--van-rolling-text-item-border-radius);
|
||||
background: var(--van-rolling-text-background);
|
||||
overflow: hidden;
|
||||
|
||||
@ -29,12 +28,12 @@
|
||||
|
||||
&__box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__ani {
|
||||
animation: van-up var(--van-duration) ease-in-out var(--van-delay);
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: both;
|
||||
&--animate {
|
||||
animation: van-up var(--van-duration) ease-in-out var(--van-delay);
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@ -42,13 +41,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.van-roll-single-down {
|
||||
&__box {
|
||||
.van-rolling-text-item--down {
|
||||
.van-rolling-text-item__box {
|
||||
transform: translateY(var(--van-translate));
|
||||
}
|
||||
|
||||
&__ani {
|
||||
animation-name: van-down;
|
||||
&--animate {
|
||||
animation-name: van-down;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,663 +2,663 @@
|
||||
|
||||
exports[`should render comp 1`] = `
|
||||
<div class="van-rolling-text">
|
||||
<div style="height: 40px; --van-translate: -1640px; --van-duration: 2s; --van-delay: 0s;"
|
||||
class="van-roll-single-down van-roll-single"
|
||||
<div class="van-rolling-text-item van-rolling-text-item--down"
|
||||
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-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__box van-rolling-text-item__box--animate">
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 40px; --van-translate: -1680px; --van-duration: 2s; --van-delay: 0.2s;"
|
||||
class="van-roll-single-down van-roll-single"
|
||||
<div class="van-rolling-text-item van-rolling-text-item--down"
|
||||
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-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__box van-rolling-text-item__box--animate">
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 40px; --van-translate: -1720px; --van-duration: 2s; --van-delay: 0.4s;"
|
||||
class="van-roll-single-down van-roll-single"
|
||||
<div class="van-rolling-text-item van-rolling-text-item--down"
|
||||
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-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__box van-rolling-text-item__box--animate">
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-roll-single-down__item"
|
||||
<div class="van-rolling-text-item__item"
|
||||
style="line-height: 40px;"
|
||||
>
|
||||
0
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { RollingText, type RollingTextInstance } from '..';
|
||||
import { later, mount } from '../../../test';
|
||||
|
||||
const itemWrapperClass = '.van-roll-single-down__box';
|
||||
const animationClass = 'van-roll-single-down__ani';
|
||||
const itemWrapperClass = '.van-rolling-text-item__box';
|
||||
const animationClass = 'van-rolling-text-item__box--animate';
|
||||
|
||||
test('should render comp', () => {
|
||||
const wrapper = mount(RollingText, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user