RollingText 翻滚文本动效

文本翻滚动效，可以翻滚数字和其他类型文本。请升级 ryxon 到 >= 1.12.0 版本来使用该组件。

基础用法

设置翻滚方向

设置各数位停止顺序

翻转非数字内容

API

Props

参数	说明	类型	默认值
start-num	起始数值	number	0
target-num	目标数值	number	-
text-list	内容数组，用于翻转非数字内容	string[]	[]
duration	动画时长，单位为秒	number	2
direction	文本翻滚方向，值为 down 和 up	string	down
auto-start	是否自动开始动画	boolean	true
stop-order	各个数位动画停止先后顺序，值为 ltr 和 rtl	string	ltr
height	数字高度，单位为 px	number	40

方法

通过 ref 可以获取到 RollingText 实例并调用实例方法，详见组件实例方法。

方法名	说明	参数	返回值
start	开始动画	-	-
reset	重置动画	-	-

类型定义

组件导出以下类型定义：

import type {
  RollingTextProps,
  RollingTextInstance,
  RollingTextDirection,
  RollingTextStopOrder
} from 'ryxon'

RollingTextInstance 是组件实例的类型，用法如下：

import { ref } from 'vue'
import type { RollingTextInstance } from 'ryxon'

const rollingTextRef = ref<RollingTextInstance>()

rollingTextRef.value?.start()

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--r-rolling-text-background	inherit	单个数位背景色
--r-rolling-text-color	var(--r-text-color)	数字颜色
--r-rolling-text-font-size	var(--r-font-size-md)	字体大小
--r-rolling-text-gap	0px	数位之间的间隔
--r-rolling-text-item-width	15px	单个数位宽度
--r-rolling-text-item-border-radius	0px	单个数位边框圆角