开发预览更新于 2026-05-10

Marquee 跑马灯

横向匀速滚动的文字或元素，常用于公告条 / 滚动消息 / logo 墙。

基础用法

duration 控制完整滚动一圈的秒数；默认从右往左。pauseOnHover 默认开启，鼠标悬停时暂停。

背景

📢 系统将于今晚 23:00 进行升级维护，预计 30 分钟 · 期间订单系统不可用 · 请提前安排

<script setup lang="ts">
import { CfMarquee } from '@chufix-design/vue';
</script>

<template>
  <CfMarquee :duration="20">
    <span style="color: var(--fg-1);">📢 系统将于今晚 23:00 进行升级维护，预计 30 分钟 · 期间订单系统不可用 · 请提前安排</span>
  </CfMarquee>
</template>

<CfMarquee duration={20}>
📢 系统将于今晚 23:00 进行升级维护...
</CfMarquee>

API

属性	类型	默认值	说明
`content`	`string`	`—`	简单文本内容；也可使用默认 slot / children 传入富内容
`duration`	`number`	`20`	滚动一圈的秒数；越小越快
`direction`	`'left' \| 'right'`	`'left'`	滚动方向
`pauseOnHover`	`boolean`	`true`	鼠标悬停时暂停动画
`gap`	`number`	`40`	内容尾端与下一轮起点之间的留白（像素）