@daflow-ui/ui-marquee

Marquee component for DaFlow UI component library.

Installation

pnpm add @daflow-ui/ui-marquee

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-marquee/style.css';

在组件中使用：

<script setup lang="ts">
import { DfMarquee, DfMarqueeItem } from '@daflow-ui/ui-marquee';
</script>

<template>
  <DfMarquee :speed="80">
    <DfMarqueeItem v-for="logo in logos" :key="logo">
      <div>{{ logo }}</div>
    </DfMarqueeItem>
  </DfMarquee>
</template>

Props

DfMarquee

| Name | Type | Default | Description | | --- | --- | --- | --- | | speed | number | 50 | 滚动速度（px/s），不是动画时长（ms） | | gap | number | - | 跑马灯项之间的间距（px），不传则使用组件 CSS 变量 | | pauseOnInteraction | boolean | false | hover/focus 时暂停滚动 | | showEdge | boolean | false | 是否显示两侧渐隐遮罩 |

DfMarqueeItem

纯容器组件，无额外 props。

Development

Install dependencies

pnpm install

Start playground (at monorepo root)

cd ../..
pnpm dev

组件会自动出现在 playground 导航中（通过 dev/index.vue）。

Build

pnpm build

Type check

pnpm typecheck

Lint

pnpm lint
pnpm lint:fix

License

MIT