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`	`任意`	`""`	容器 div 的 CSS 类名
`autoFill`	`布尔值`	`false`	是否自动用子元素的副本填充跑马灯中的空白区域
`play`	`布尔值`	`true`	是否播放或暂停跑马灯
`pauseOnHover`	`布尔值`	`false`	鼠标悬停时是否暂停跑马灯
`pauseOnClick`	`布尔值`	`false`	点击时是否暂停跑马灯
`direction`	`"left" \| "right"\| "up"\| "down"`	`"left"`	跑马灯滑动的方向警告：垂直跑马灯目前处于实验阶段，可能存在错误。设置高度和宽度时，请交换它们的值。
`speed`	`数字`	`50`	以像素/秒计算的速度
`delay`	`数字`	`0`	渲染后动画延迟的持续时间（秒）
`loop`	`数字`	`0`	跑马灯循环的次数，0 等于无限循环
`gradient`	`布尔值`	`false`	是否显示渐变
`gradientColor`	`字符串`	`白色`	渐变的颜色
`gradientWidth`	`数字或字符串`	`200`	渐变在两侧的宽度

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

MIT - 由 Hànzy 用心制作 💙