diff --git a/packages/vant/src/rolling-text/README.md b/packages/vant/src/rolling-text/README.md index bb75a1085..12358f2a2 100644 --- a/packages/vant/src/rolling-text/README.md +++ b/packages/vant/src/rolling-text/README.md @@ -102,6 +102,7 @@ export default { :duration="2" stop-order="rtl" direction="up" + :height="70" /> ``` @@ -109,10 +110,10 @@ export default { .my-rolling-text { --van-rolling-text-background: deepskyblue; --van-rolling-text-color: white; - --van-rolling-text-font-size: 20px; + --van-rolling-text-font-size: 40px; --van-rolling-text-gap: 6px; --van-rolling-text-single-border-radius: 5px; - --van-rolling-text-single-width: 25px; + --van-rolling-text-single-width: 50px; } ``` @@ -166,6 +167,7 @@ export default { | direction | Rolling direction of the text, with `down` and `up` as the values | _string_ | `down` | | auto-start | Whether to start the animation | _boolean_ | `true` | | stop-order | Order of stopping the animation of each digit, with `ltr` and `rtl` as the values | _string_ | `ltr` | +| height | Height of digit, `px` as unit | _number_ | `40` | ### Methods diff --git a/packages/vant/src/rolling-text/README.zh-CN.md b/packages/vant/src/rolling-text/README.zh-CN.md index f381d454a..f1004f65c 100644 --- a/packages/vant/src/rolling-text/README.zh-CN.md +++ b/packages/vant/src/rolling-text/README.zh-CN.md @@ -102,6 +102,7 @@ export default { :duration="2" stop-order="rtl" direction="up" + :height="70" /> ``` @@ -109,10 +110,10 @@ export default { .my-rolling-text { --van-rolling-text-background: deepskyblue; --van-rolling-text-color: white; - --van-rolling-text-font-size: 20px; + --van-rolling-text-font-size: 40px; --van-rolling-text-gap: 6px; --van-rolling-text-single-border-radius: 5px; - --van-rolling-text-single-width: 25px; + --van-rolling-text-single-width: 50px; } ``` @@ -166,6 +167,7 @@ export default { | direction | 文本翻滚方向,值为 `down` 和 `up` | _string_ | `down` | | auto-start | 是否自动开始动画 | _boolean_ | `true` | | stop-order | 各个数位动画停止先后顺序,值为 `ltr` 和 `rtl` | _string_ | `ltr` | +| height | 数位高度,单位为 `px` | _number_ | `40` | ### 方法 diff --git a/packages/vant/src/rolling-text/RollingText.tsx b/packages/vant/src/rolling-text/RollingText.tsx index 436cfa2f3..840418315 100644 --- a/packages/vant/src/rolling-text/RollingText.tsx +++ b/packages/vant/src/rolling-text/RollingText.tsx @@ -39,6 +39,7 @@ export const rollingTextProps = { autoStart: truthProp, direction: makeStringProp('down'), stopOrder: makeStringProp('ltr'), + height: makeNumberProp(40), }; const CIRCLE_NUM = 2; @@ -143,6 +144,7 @@ export default defineComponent({ duration={props.duration} direction={props.direction} isStart={rolling.value} + height={props.height} delay={getDelay(i, targetNumArr.value.length)} /> ))} diff --git a/packages/vant/src/rolling-text/RollingTextItem.tsx b/packages/vant/src/rolling-text/RollingTextItem.tsx index c42316755..4e8a80d94 100644 --- a/packages/vant/src/rolling-text/RollingTextItem.tsx +++ b/packages/vant/src/rolling-text/RollingTextItem.tsx @@ -14,10 +14,9 @@ export const props = { duration: makeNumberProp(2), isStart: Boolean, direction: String, + height: makeNumberProp(40), }; -const HEIGHT = 40; - export default defineComponent({ name: 'RollSingle', @@ -40,15 +39,16 @@ export default defineComponent({ const newFigureArr = computed(directionConfig.dataHandle); const totalHeight = computed( - () => HEIGHT * props.figureArr.length - HEIGHT + () => props.height * props.figureArr.length - props.height ); const translateValPx = computed(() => `-${totalHeight.value}px`); + const itemStyleObj = { - lineHeight: addUnit(HEIGHT), + lineHeight: addUnit(props.height), }; const getStyle = () => ({ - height: addUnit(HEIGHT), + height: addUnit(props.height), '--van-translate': translateValPx.value, '--van-duration': props.duration + 's', '--van-delay': props.delay + 's', diff --git a/packages/vant/src/rolling-text/demo/index.vue b/packages/vant/src/rolling-text/demo/index.vue index f92e6b7b4..eb77af482 100644 --- a/packages/vant/src/rolling-text/demo/index.vue +++ b/packages/vant/src/rolling-text/demo/index.vue @@ -138,6 +138,7 @@ const reset = () => { :auto-start="isStart4" stop-order="rtl" direction="up" + :height="70" /> @@ -153,6 +154,7 @@ const reset = () => { :auto-start="false" stop-order="rtl" direction="up" + :height="70" /> @@ -178,9 +180,9 @@ const reset = () => { .my-rolling-text { --van-rolling-text-background: deepskyblue; --van-rolling-text-color: white; - --van-rolling-text-font-size: 20px; + --van-rolling-text-font-size: 40px; --van-rolling-text-gap: 6px; --van-rolling-text-single-border-radius: 5px; - --van-rolling-text-single-width: 25px; + --van-rolling-text-single-width: 50px; }