feat(RollingText): add height props (#11990)

* feat(RollingText): add height setting

* chore: npm run test

* fix: use match instead of replace

* feat: height setting

* fix: api table

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
 

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` |
 
 ### 方法
 

packages/vant/src/rolling-text/RollingText.tsx

@@ -39,6 +39,7 @@ export const rollingTextProps = {
   autoStart: truthProp,
   direction: makeStringProp<RollingTextDirection>('down'),
   stopOrder: makeStringProp<RollingTextStopOrder>('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)}
           />
         ))}

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',

packages/vant/src/rolling-text/demo/index.vue

@@ -138,6 +138,7 @@ const reset = () => {
         :auto-start="isStart4"
         stop-order="rtl"
         direction="up"
+        :height="70"
       />
     </div>
   </demo-block>
@@ -153,6 +154,7 @@ const reset = () => {
         :auto-start="false"
         stop-order="rtl"
         direction="up"
+        :height="70"
       />
       <van-grid clickable :column-num="3" style="margin-top: 10px">
         <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
@@ -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;
 }
 </style>