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`	`boolean`	是否播放或暂停跑马灯
`pauseOnHover`	`boolean`	`false`	boolean
`鼠标悬停时是否暂停跑马灯`	`boolean`	`false`	pauseOnClick
`boolean`	`"left" \| "right"\| "up"\| "down"`	`"left"`	跑马灯滑动的方向警告：垂直跑马灯目前是实验性的，可能存在错误。设置高度和宽度时，请交换跑马灯的高度和宽度值
`speed`	`number`	`50`	速度计算为像素/秒
`delay`	`number`	`0`	number
`渲染后延迟动画的持续时间，以秒为单位`	`number`	`0`	loop
`number`	`boolean`	`false`	跑马灯应循环的次数，0 等于无限循环
`gradient`	`boolean`	`是否显示渐变`	gradientColor
`string`	`white`	`200`	渐变的颜色

number \| string	描述
`两侧渐变的宽度`	事件
`事件名称`	finish

cycleComplete