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`	當跑馬燈滾動結束並停止時發出。僅在迴圈次數非零時調用。
`cycleComplete`	當跑馬燈完成一個循環時發出。如果達到最大循環次數則不會調用（請改用 onFinish）。

MIT - 由 Hànzy 以 💙 製作