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 製作