From 2418f71274a41345c14d9ec10e31fcde8a801345 Mon Sep 17 00:00:00 2001 From: inottn Date: Sun, 18 Jun 2023 09:53:01 +0800 Subject: [PATCH] perf(RollingText): standardize namespace and simplify logic (#11993) * perf(RollingText): standardize namespace and simplify logic * chore: update style * chore: update doc --- packages/vant/src/rolling-text/README.md | 8 +- .../vant/src/rolling-text/README.zh-CN.md | 8 +- .../vant/src/rolling-text/RollingTextItem.tsx | 36 +-- packages/vant/src/rolling-text/demo/index.vue | 4 +- packages/vant/src/rolling-text/index.less | 31 +- .../test/__snapshots__/index.spec.ts.snap | 276 +++++++++--------- .../vant/src/rolling-text/test/index.spec.ts | 4 +- 7 files changed, 180 insertions(+), 187 deletions(-) diff --git a/packages/vant/src/rolling-text/README.md b/packages/vant/src/rolling-text/README.md index 12358f2a2..a0c3b7c58 100644 --- a/packages/vant/src/rolling-text/README.md +++ b/packages/vant/src/rolling-text/README.md @@ -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 | diff --git a/packages/vant/src/rolling-text/README.zh-CN.md b/packages/vant/src/rolling-text/README.zh-CN.md index f1004f65c..80699fe27 100644 --- a/packages/vant/src/rolling-text/README.zh-CN.md +++ b/packages/vant/src/rolling-text/README.zh-CN.md @@ -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_ | 单个数位边框圆角 | diff --git a/packages/vant/src/rolling-text/RollingTextItem.tsx b/packages/vant/src/rolling-text/RollingTextItem.tsx index 4e8a80d94..6a9c1d088 100644 --- a/packages/vant/src/rolling-text/RollingTextItem.tsx +++ b/packages/vant/src/rolling-text/RollingTextItem.tsx @@ -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('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 () => ( -
-
+
+
{Array.isArray(newFigureArr.value) && newFigureArr.value.map((figure) => (
diff --git a/packages/vant/src/rolling-text/demo/index.vue b/packages/vant/src/rolling-text/demo/index.vue index eb77af482..729315196 100644 --- a/packages/vant/src/rolling-text/demo/index.vue +++ b/packages/vant/src/rolling-text/demo/index.vue @@ -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; } diff --git a/packages/vant/src/rolling-text/index.less b/packages/vant/src/rolling-text/index.less index e15d7c677..a05dd42ff 100644 --- a/packages/vant/src/rolling-text/index.less +++ b/packages/vant/src/rolling-text/index.less @@ -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; + } } } diff --git a/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap index 0f0ae9546..aec2e7ad7 100644 --- a/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap @@ -2,663 +2,663 @@ exports[`should render comp 1`] = `
-
-
-
+
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
-
-
+
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
-
-
+
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0
-
9
-
8
-
7
-
6
-
5
-
4
-
3
-
2
-
1
-
0 diff --git a/packages/vant/src/rolling-text/test/index.spec.ts b/packages/vant/src/rolling-text/test/index.spec.ts index 384fd0848..e22676db7 100644 --- a/packages/vant/src/rolling-text/test/index.spec.ts +++ b/packages/vant/src/rolling-text/test/index.spec.ts @@ -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, {