Nuxt 跑马灯

一个轻量级的 Nuxt 3 组件，利用 CSS 动画的力量创建流畅的跑马灯效果。

nuxt-marquee

安装

npx nuxi@latest module add marquee

要使用此模块，请将其添加到你的 nuxt.config.ts 文件的 modules 部分。

export default defineNuxtConfig({
  // ..
  modules: ["nuxt-marquee"],
});

<template>
  <NuxtMarquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
  </NuxtMarquee>
</template>

属性名	类型	默认值	描述
`style`	`CSSProperties`	`{}`	容器 div 的内联样式
`class`	`any`	`""`	用于设置容器 div 样式的 CSS 类名
`autoFill`	`boolean`	`false`	是否自动使用子元素的副本填充跑马灯中的空白区域
`play`	`boolean`	`true`	是否播放或暂停跑马灯
`pauseOnHover`	`boolean`	`false`	鼠标悬停时是否暂停跑马灯
`pauseOnClick`	`boolean`	`false`	点击时是否暂停跑马灯
`direction`	`"left" \| "right"\| "up"\| "down"`	`"left"`	跑马灯滑动的方向警告：垂直跑马灯目前处于实验性阶段，可能存在错误。设置高度和宽度时，请交换跑马灯的高度和宽度值
`speed`	`number`	`50`	速度，以像素/秒为单位计算
`delay`	`number`	`0`	渲染后动画延迟的时间，以秒为单位
`loop`	`number`	`0`	跑马灯应循环的次数，0 相当于无限循环
`gradient`	`boolean`	`false`	是否显示渐变
`gradientColor`	`string`	`white`	渐变的颜色
`gradientWidth`	`number \| string`	`200`	两侧渐变的宽度

事件名称	描述
`finish`	跑马灯完成滚动并停止时触发。仅在 loop 为非零值时调用。
`cycleComplete`	跑马灯完成一次循环时触发。如果达到最大循环次数则不会调用（请改用 onFinish）。

MIT - 由 Hànzy 用 💙 制作