[Bug Report] RollingText 会把 . 设置为 9

[duanwenxiang]

重现链接

https://codesandbox.io/p/sandbox/vant-4-issue-template-forked-zvqty5?file=%2Fsrc%2FApp.vue%3A8%2C27

Vant 版本

3.8

描述一下你遇到的问题。

RollingText 会把 . 设置为 9，是否可以支持 .

重现步骤

使用 RollingText 中使用小数点

设备/浏览器

No response

[github-actions[bot]]

Hello @duanwenxiang. Please provide an online reproduction demo by codesandbox or a minimal GitHub repository. Issues marked with need reproduce will be closed if there is no activity within 3 days. For background, please refer to Why reproductions are required.

你好 @duanwenxiang, 我们需要你提供一个在线的重现示例，以便于我们帮你排查问题。你可以通过点击 codesandbox 创建，或者提供一个最小化的 GitHub 仓库。如果 3 天内未跟进，此 issue 将会被自动关闭。背景请参考 为什么需要最小重现。

[inottn]

支持小数点的话，小数点和数字的宽度一样，看上去会不会有点奇怪

[duanwenxiang]

支持小数点的话，小数点和数字的宽度一样，看上去会不会有点奇怪

我觉得可以通过插槽的方式解决，通过插槽来配置可翻滚和不可翻滚，不可翻滚的可以配置小数点，冒号等，这样像那种翻滚的时钟也可以实现了

[nemo-shen]

@duanwenxiang 我不知道你的业务场景是什么，提供给你两种解决方案

1. 小数点需要跟着数字一起滚动

假设你滚动出来的是折扣金额，最低00.01最高99999(中间逗号处取值 /\.|[1-9]/)

可以使用 prop textList 自定义 提供你参考代码：https://codesandbox.io/p/sandbox/vant-4-issue-template-forked-8y9l3w?file=%2Fsrc%2FApp.vue

2. 小数点不需要一起滚动

假设你的滚动出来的是折扣金额，最低00.01最高99.99(中间 '.' 始终存在)

可以使用多个 <VanRollingText /> 提供你参考代码：https://codesandbox.io/p/sandbox/vant-4-issue-template-forked-y6s8hx?file=%2Fsrc%2FApp.vue%3A7%2C1-8%2C1

---

discuss

看起来需要提供 <van-rolling-text-group /> 或者开放slot: <van-rolling-text-item />，仅提供 target-num text-list 局限性有点大，而且组件内置成数字，感觉不应该由组件来默认数据类型

<van-rolling-text-group ref="rollingTextGroup">
  <van-rolling-text :traget-num="2" />
  <van-rolling-text :traget-num="3" />
  <span>.</span>
  <van-rolling-text :traget-num="0" />
  <van-rolling-text :traget-num="0" />
</van-rolling-text-group>
<button @click="startRolling">start</button>

<script setup>
import { ref } from 'vue'
const rollingTextGroup = ref('')

const startRolling = () => {
  rollingTextGroup.start();
}
</script>

或者

<van-rolling-text ref="rollingText">
  <van-rolling-text-item target="1" values="rollingValues" />
  <van-rolling-text-item target="foo" values="rollingValues" />
  <van-rolling-text-item target="🤗" values="rollingValues" />
  <van-rolling-text-item target="<img url>" values="rollingValues" />
</van-rolling-text>
<button @click="startRolling">start</button>

<script setup>
import { ref } from 'vue'
const rollingText = ref('')
const rollingValues = [1, 2, 3, 4, 5, 'foo', 'bar', '🤗', '<img url>']

const startRolling = () => {
  rollingText.start();
}
</script>