跑马灯 marquee

布局组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

窗口只露出一段，轨道在里面往左走；滚动整段在皮肤的 @keyframes 里，用的人不写动画

系统将于本周六 02:00 起停机维护两小时新版导出支持按列脱敏本月账单已生成

<script setup lang="ts">
import { XhMarqueeContent, XhMarqueeRoot } from "@xihan-ui/vue";

const notices = [
  "系统将于本周六 02:00 起停机维护两小时",
  "新版导出支持按列脱敏",
  "本月账单已生成",
];
</script>

<template>
  <XhMarqueeRoot style="max-inline-size: 420px">
    <XhMarqueeContent>
      <span v-for="n in notices" :key="n" style="margin-inline-end: 32px; white-space: nowrap">
        {{ n }}
      </span>
    </XhMarqueeContent>
  </XhMarqueeRoot>
</template>

方向

四档：左右走横轴，上下走纵轴。轴另落成 data-orientation，竖着滚的窗口靠 --xh-marquee-block-size 定高

left

第 1 条公告 第 2 条公告 第 3 条公告 第 4 条公告 第 5 条公告 第 6 条公告

right

第 1 条公告 第 2 条公告 第 3 条公告 第 4 条公告 第 5 条公告 第 6 条公告

up

第 1 条公告 第 2 条公告 第 3 条公告 第 4 条公告 第 5 条公告 第 6 条公告

down

第 1 条公告 第 2 条公告 第 3 条公告 第 4 条公告 第 5 条公告 第 6 条公告

<script setup lang="ts">
import { XhMarqueeContent, XhMarqueeRoot } from "@xihan-ui/vue";

const directions = ["left", "right", "up", "down"] as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <div v-for="d in directions" :key="d" style="inline-size: 200px">
      <p style="margin-block-end: 8px; font-size: 12px">{{ d }}</p>
      <XhMarqueeRoot
        :direction="d"
        style="
          --xh-marquee-block-size: 5rem;
          border: 1px solid var(--xh-border-default);
          border-radius: 6px;
        "
      >
        <XhMarqueeContent>
          <span v-for="i in 6" :key="i" style="padding: 4px 12px; white-space: nowrap">
            第 {{ i }} 条公告
          </span>
        </XhMarqueeContent>
      </XhMarqueeRoot>
    </div>
  </div>
</template>

重复铺满

autoFill 在轨道里铺两份内容，走完一份第二份正好压在起点上，看不出接缝；不开则整段走完再回来

不开：整段走出窗口后再从另一侧进来

多租户字段级脱敏动态 API工作流代码生成

autoFill：一圈只走一份，接缝处始终有内容

多租户字段级脱敏动态 API工作流代码生成

多租户字段级脱敏动态 API工作流代码生成

<script setup lang="ts">
import { XhMarqueeContent, XhMarqueeRoot } from "@xihan-ui/vue";

const tags = ["多租户", "字段级脱敏", "动态 API", "工作流", "代码生成"];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <div v-for="fill in [false, true]" :key="String(fill)">
      <p style="margin-block-end: 8px; font-size: 12px">
        {{ fill ? "autoFill：一圈只走一份，接缝处始终有内容" : "不开：整段走出窗口后再从另一侧进来" }}
      </p>
      <XhMarqueeRoot
        :auto-fill="fill"
        :speed="60"
        style="max-inline-size: 420px; border: 1px solid var(--xh-border-default); border-radius: 6px"
      >
        <XhMarqueeContent>
          <span v-for="t in tags" :key="t" style="padding: 6px 14px; white-space: nowrap">{{ t }}</span>
        </XhMarqueeContent>
      </XhMarqueeRoot>
    </div>
  </div>
</template>

速度与暂停

speed 是每秒像素；pauseOnHover 在指针停下或焦点落进窗口时停住

speed = 30（每秒 30 像素）

把指针停在这儿，或用 Tab 聚焦这条链接

把指针停在这儿，或用 Tab 聚焦这条链接

speed = 60（每秒 60 像素）

把指针停在这儿，或用 Tab 聚焦这条链接

把指针停在这儿，或用 Tab 聚焦这条链接

speed = 140（每秒 140 像素）

把指针停在这儿，或用 Tab 聚焦这条链接

把指针停在这儿，或用 Tab 聚焦这条链接

<script setup lang="ts">
import { XhMarqueeContent, XhMarqueeRoot } from "@xihan-ui/vue";

const speeds = [30, 60, 140] as const;
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <!--
      皮肤拿「一份内容在滚动轴上的长度」除以 speed 算一圈的时长，那个长度取自
      --xh-marquee-span（缺省 600）。内容长度与缺省差得多时把 span 改成真实长度，
      每秒滚过的像素数才逐字对得上。
    -->
    <div v-for="s in speeds" :key="s">
      <p style="margin-block-end: 6px; font-size: 12px">speed = {{ s }}（每秒 {{ s }} 像素）</p>
      <XhMarqueeRoot
        :speed="s"
        auto-fill
        pause-on-hover
        style="max-inline-size: 420px; border: 1px solid var(--xh-border-default); border-radius: 6px"
      >
        <XhMarqueeContent>
          <a href="#" style="padding: 6px 14px; white-space: nowrap">
            把指针停在这儿，或用 Tab 聚焦这条链接
          </a>
        </XhMarqueeContent>
      </XhMarqueeRoot>
    </div>
  </div>
</template>

产物

层	值
自定义元素	<xh-marquee>
Vue 组件	XhMarqueeContent XhMarqueeRoot
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/marquee.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="marquee"：root · content

Props

属性	类型	必填	说明
autoFill	boolean		内容不足时重复铺满：轨道里铺两份内容，走完一份正好接上第二份。
direction	MarqueeDirection		滚动方向，缺省 left。
pauseOnHover	boolean		指针停在窗口上时暂停；键盘焦点落进窗口时同样暂停。
speed	number		每秒滚过的像素数。写成根上的内联变量，皮肤拿一份内容的长度除以它换成一圈的时长。 只收有限正数；其余值不写出，退回皮肤缺省。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
copies	number	轨道里要铺几份内容：autoFill 开是 2，关是 1。
getRootProps	() => T['element']
getContentProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。