diff --git a/packages/vant/src/rolling-text/README.md b/packages/vant/src/rolling-text/README.md index a0c3b7c58..88523c9ef 100644 --- a/packages/vant/src/rolling-text/README.md +++ b/packages/vant/src/rolling-text/README.md @@ -61,11 +61,11 @@ You can set the order of stopping the animation of each digit through the `stop- ### Roll Non-numeric Text -You can set non-numeric content flip using the `text-array` props. +You can reverse non-numeric content by using the `text-list` prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length. ```html ``` ```css .my-rolling-text { - --van-rolling-text-background: deepskyblue; + --van-rolling-text-background: #1989fa; --van-rolling-text-color: white; - --van-rolling-text-font-size: 40px; + --van-rolling-text-font-size: 24px; --van-rolling-text-gap: 6px; --van-rolling-text-item-border-radius: 5px; - --van-rolling-text-item-width: 50px; + --van-rolling-text-item-width: 40px; } ``` @@ -162,7 +162,7 @@ export default { | --- | --- | --- | --- | | start-num | Start number | _number_ | `0` | | target-num | Target number | _number_ | - | -| text-array | Text array | _Array_ | `[]` | +| text-list | Text array | _string[]_ | `[]` | | duration | Duration of the animation, in seconds | _number_ | `2` | | direction | Rolling direction of the text, with `down` and `up` as the values | _string_ | `down` | | auto-start | Whether to start the animation | _boolean_ | `true` | diff --git a/packages/vant/src/rolling-text/README.zh-CN.md b/packages/vant/src/rolling-text/README.zh-CN.md index 80699fe27..a757f7077 100644 --- a/packages/vant/src/rolling-text/README.zh-CN.md +++ b/packages/vant/src/rolling-text/README.zh-CN.md @@ -61,11 +61,11 @@ app.use(RollingText); ### 翻转非数字内容 -可以通过 `text-array` 属性设置非数字内容的翻转。 +你可以使用 `text-list` 属性设置非数字内容的翻转。组件会从数组的第一项翻转到最后一项，请确保数组长度大于等于 2，以及每一项的长度一致。 ```html ``` ```css .my-rolling-text { - --van-rolling-text-background: deepskyblue; + --van-rolling-text-background: #1989fa; --van-rolling-text-color: white; - --van-rolling-text-font-size: 40px; + --van-rolling-text-font-size: 24px; --van-rolling-text-gap: 6px; --van-rolling-text-item-border-radius: 5px; - --van-rolling-text-item-width: 50px; + --van-rolling-text-item-width: 40px; } ``` @@ -162,7 +162,7 @@ export default { | --- | --- | --- | --- | | start-num | 开始数值 | _number_ | `0` | | target-num | 目标数值 | _number_ | - | -| text-array | 内容数组，翻转非数字内容，需要传此参数 | _Array_ | `[]` | +| text-list | 内容数组，用于翻转非数字内容 | _string[]_ | `[]` | | duration | 动画时长，单位为秒 | _number_ | `2` | | direction | 文本翻滚方向，值为 `down` 和 `up` | _string_ | `down` | | auto-start | 是否自动开始动画 | _boolean_ | `true` | diff --git a/packages/vant/src/rolling-text/RollingText.tsx b/packages/vant/src/rolling-text/RollingText.tsx index 840418315..d1faecee5 100644 --- a/packages/vant/src/rolling-text/RollingText.tsx +++ b/packages/vant/src/rolling-text/RollingText.tsx @@ -34,7 +34,7 @@ const [name, bem] = createNamespace('rolling-text'); export const rollingTextProps = { startNum: makeNumberProp(0), targetNum: Number, - textArray: makeArrayProp(), + textList: makeArrayProp(), duration: makeNumberProp(2), autoStart: truthProp, direction: makeStringProp('down'), @@ -53,21 +53,21 @@ export default defineComponent({ setup(props) { const isCustomType = computed( - () => Array.isArray(props.textArray) && props.textArray.length + () => Array.isArray(props.textList) && props.textList.length ); const getTextArrByIdx = (idx: number) => { if (!isCustomType.value) return []; const result = []; - for (let i = 0; i < props.textArray.length; i++) { - result.push(props.textArray[i][idx]); + for (let i = 0; i < props.textList.length; i++) { + result.push(props.textList[i][idx]); } return result; }; const targetNumArr = computed(() => { if (isCustomType.value) - return props.textArray[props.textArray.length - 1].split(''); + return props.textList[props.textList.length - 1].split(''); return `${props.targetNum}`.split(''); }); diff --git a/packages/vant/src/rolling-text/demo/index.vue b/packages/vant/src/rolling-text/demo/index.vue index 729315196..f56cddd90 100644 --- a/packages/vant/src/rolling-text/demo/index.vue +++ b/packages/vant/src/rolling-text/demo/index.vue @@ -39,7 +39,7 @@ const isStart3 = ref(false); const isStart4 = ref(false); const isStartNoNumberType = ref(false); -const textArray = ref([ +const textList = ref([ 'aaaaa', 'bbbbb', 'ccccc', @@ -114,7 +114,7 @@ const reset = () => {
{ :auto-start="isStart4" stop-order="rtl" direction="up" - :height="70" + :height="54" />
@@ -154,9 +154,9 @@ const reset = () => { :auto-start="false" stop-order="rtl" direction="up" - :height="70" + :height="54" /> - + @@ -178,11 +178,11 @@ const reset = () => { } .my-rolling-text { - --van-rolling-text-background: deepskyblue; + --van-rolling-text-background: #1989fa; --van-rolling-text-color: white; - --van-rolling-text-font-size: 40px; + --van-rolling-text-font-size: 24px; --van-rolling-text-gap: 6px; --van-rolling-text-item-border-radius: 5px; - --van-rolling-text-item-width: 50px; + --van-rolling-text-item-width: 40px; }