ShimmerText 流光文字动画
ShimmerText 是内置的 SFC 自定义组件,以动画效果逐字高亮文字,产生"流光"视觉效果。适合用于 AI 生成中、数据加载中等等待场景,提升交互体验。
来源:内置 SFC 组件(
textual_vuepy/components/ShimmerText.vue),通过vtextual插件自动注册,无需手动导入。
基本用法
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | str | "Thinking" | 要展示的文字内容 |
highlight_width | int | 3 | 同时高亮的字符数(光晕宽度) |
interval | float | 0.1 | 动画每帧间隔,单位秒,越小动画越快 |
running | bool | False | 是否运行动画;False 时文字静止显示,True 时启动流光效果 |
style | str | "" | 应用到内部 Label 的 TCSS 内联样式(如 height、color) |
v-model
ShimmerText 无 v-model。通过 :running prop 控制动画状态,通过 :text prop 控制显示文字。
事件
| 事件 | 说明 |
|---|---|
| — | 无特殊事件 |
配合 AI 请求使用
自定义样式示例
通用属性
所有 Textual-vuepy 组件均支持以下属性:
| 属性 | 类型 | 说明 |
|---|---|---|
id | str | 组件 CSS ID |
style | str | TCSS 内联样式 |
class | str | TCSS 类名(空格分隔) |
border_title | str | 边框标题 |
border_subtitle | str | 边框副标题 |