直接跳到内容

ShimmerText 流光文字动画

ShimmerText 是内置的 SFC 自定义组件,以动画效果逐字高亮文字,产生"流光"视觉效果。适合用于 AI 生成中、数据加载中等等待场景,提升交互体验。

来源:内置 SFC 组件(textual_vuepy/components/ShimmerText.vue),通过 vtextual 插件自动注册,无需手动导入。

基本用法

Props

属性类型默认值说明
textstr"Thinking"要展示的文字内容
highlight_widthint3同时高亮的字符数(光晕宽度)
intervalfloat0.1动画每帧间隔,单位秒,越小动画越快
runningboolFalse是否运行动画;False 时文字静止显示,True 时启动流光效果
stylestr""应用到内部 Label 的 TCSS 内联样式(如 heightcolor

v-model

ShimmerText 无 v-model。通过 :running prop 控制动画状态,通过 :text prop 控制显示文字。

事件

事件说明
无特殊事件

配合 AI 请求使用

自定义样式示例

通用属性

所有 Textual-vuepy 组件均支持以下属性:

属性类型说明
idstr组件 CSS ID
stylestrTCSS 内联样式
classstrTCSS 类名(空格分隔)
border_titlestr边框标题
border_subtitlestr边框副标题
ShimmerText 流光文字动画已经加载完毕