umarquee组件最省事，它通过v-for重复渲染内容并内置motion-safe动画与无障碍支持，避免了手动写css时首尾露缝、速度失配及prefers-reduced-motion兼容问题。
直接用 UMarquee 组件最省事，它专为无缝循环设计，不依赖手动复制 DOM 或 JS 控制滚动位置。
为什么不用自己写 CSS @keyframes + transform？
自己写容易卡在三个地方：首尾衔接有缝、滚动速度随内容宽度变化、prefers-reduced-motion 无障碍支持要额外判断。而 UMarquee 内部已用 v-for="i in props.repeat" 渲染多份内容，并靠 motion-safe:animate-* 类自动降级，动画逻辑收在 Tailwind 的 animate-marquee 工具类里，无需手写关键帧。
UMarquee 的 repeat 值怎么设才不露破绽？
repeat 不是越多越好，也不是固定写 3。它得满足两个条件：
- 必须 ≥ 2，否则无法形成视觉循环（单份内容滚动完就空了）
- 推荐设为
3或4，值越大，DOM 节点越多，但对现代浏览器影响微乎其微；设为2在极窄视口下可能因内容过长而短暂露白 - 如果内容本身含动态宽度（比如响应式图标或文字），建议搭配
shrink-0防止换行打断滚动流
方向、速度、暂停这些怎么控制？
方向由 orientation prop 控制："horizontal"（默认）或 "vertical"；速度靠 Tailwind 的 duration- 类调整，例如加 duration-5000 让一圈跑 5 秒；暂停用 hover:pause-animation 这类自定义工具类（需在 tailwind.config.js 里配好，不能只靠 hover:animate-pause —— Tailwind 默认没这个类）。
常见错误是直接给组件加 class="animate-pause"，结果无效，因为 UMarquee 的动画实际作用在内部 div[data-slot="content"] 上，样式穿透需用 @layer utilities 显式定义。
垂直跑马灯在小屏上容易错位，怎么稳住？
垂直方向滚动时，height 必须显式设定，否则容器高度塌缩，动画会跳帧。不要依赖 min-h- 或 h-auto，而是用固定值如 h-12 或基于行高的计算值 h-[3rem]。另外，orientation="vertical" 时，内部每个重复项的 margin-bottom 必须为 0，否则间隙会被动画放大，出现“一格一格往下蹦”的现象 —— 这个细节在文档里没明说，但源码里 ui.content() 默认不带 margin，你若手动加了 mb-2 就会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
