Frontend Tools

Appearance

跑马灯 ​

Vue 无缝滚动、跑马灯效果组件。

@selemondev/vue3-marquee ​

基本信息 ​

特点 ​

  • ✅ 专为 Tailwind CSS 设计
  • ✅ 淡入淡出效果
  • ✅ 方向控制
  • ✅ 反向滚动
  • ✅ 悬停暂停
  • ✅ 自定义速度和间距
  • ✅ TypeScript 支持

安装 ​

bash
npm install @selemondev/vue3-marquee@latest
bash
pnpm add @selemondev/vue3-marquee@latest
bash
yarn add @selemondev/vue3-marquee@latest
bash
bun add @selemondev/vue3-marquee@latest

全局注册 ​

typescript
// main.ts
import { createApp } from 'vue'
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.component('Marquee', Marquee)
app.mount('#app')

局部注册 ​

vue
<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
</script>

Nuxt 3 使用 ​

typescript
// plugins/marquee.ts
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Marquee', Marquee)
})

淡入淡出效果 ​

淡入淡出 1
淡入淡出 2
淡入淡出 3
淡入淡出 4
淡入淡出 5
淡入淡出 6
淡入淡出 7
淡入淡出 8
淡入淡出 9
淡入淡出 10
淡入淡出 1
淡入淡出 2
淡入淡出 3
淡入淡出 4
淡入淡出 5
淡入淡出 6
淡入淡出 7
淡入淡出 8
淡入淡出 9
淡入淡出 10
vue
<template>
  <Marquee :fade="true">
    <div v-for="i in 10" :key="i" class="px-4 py-2 mx-2 bg-indigo-100 text-indigo-800 rounded whitespace-nowrap">
      淡入淡出 {{ i }}
    </div>
  </Marquee>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
</script>

方向控制 ​

向左滚动（默认）

← 向左滚动 1
← 向左滚动 2
← 向左滚动 3
← 向左滚动 4
← 向左滚动 5
← 向左滚动 6
← 向左滚动 7
← 向左滚动 8
← 向左滚动 1
← 向左滚动 2
← 向左滚动 3
← 向左滚动 4
← 向左滚动 5
← 向左滚动 6
← 向左滚动 7
← 向左滚动 8

向右滚动（reverse）

向右滚动 1 →
向右滚动 2 →
向右滚动 3 →
向右滚动 4 →
向右滚动 5 →
向右滚动 6 →
向右滚动 7 →
向右滚动 8 →
向右滚动 1 →
向右滚动 2 →
向右滚动 3 →
向右滚动 4 →
向右滚动 5 →
向右滚动 6 →
向右滚动 7 →
向右滚动 8 →
vue
<template>
  <div class="space-y-4">
    <!-- 向左滚动（默认） -->
    <div>
      <h3 class="text-sm font-medium mb-3!">向左滚动（默认）</h3>
      <Marquee direction="left">
        <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-blue-100 text-blue-800 rounded whitespace-nowrap">
          ← 向左滚动 {{ i }}
        </div>
      </Marquee>
    </div>

    <!-- 向右滚动（使用 reverse） -->
    <div>
      <h3 class="text-sm font-medium mb-3!">向右滚动（reverse）</h3>
      <Marquee :reverse="true">
        <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-green-100 text-green-800 rounded whitespace-nowrap">
          向右滚动 {{ i }} →
        </div>
      </Marquee>
    </div>
  </div>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
</script>

反向滚动 ​

反向滚动 1
反向滚动 2
反向滚动 3
反向滚动 4
反向滚动 5
反向滚动 6
反向滚动 7
反向滚动 8
反向滚动 1
反向滚动 2
反向滚动 3
反向滚动 4
反向滚动 5
反向滚动 6
反向滚动 7
反向滚动 8
vue
<template>
  <Marquee :reverse="true">
    <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-orange-100 text-orange-800 rounded whitespace-nowrap">
      反向滚动 {{ i }}
    </div>
  </Marquee>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
</script>

悬停暂停 ​

鼠标悬停暂停 1
鼠标悬停暂停 2
鼠标悬停暂停 3
鼠标悬停暂停 4
鼠标悬停暂停 5
鼠标悬停暂停 6
鼠标悬停暂停 7
鼠标悬停暂停 8
鼠标悬停暂停 1
鼠标悬停暂停 2
鼠标悬停暂停 3
鼠标悬停暂停 4
鼠标悬停暂停 5
鼠标悬停暂停 6
鼠标悬停暂停 7
鼠标悬停暂停 8
vue
<template>
  <Marquee :pauseOnHover="true">
    <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-teal-100 text-teal-800 rounded whitespace-nowrap">
      鼠标悬停暂停 {{ i }}
    </div>
  </Marquee>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
</script>

自定义样式 ​

卡片 1
卡片 2
卡片 3
卡片 4
卡片 1
卡片 2
卡片 3
卡片 4
vue
<template>
  <Marquee 
    :fade="true"
    direction="left"
    :pauseOnHover="true"
    className="gap-8"
    innerClassName="gap-8"
  >
    <div class="px-6 py-3 bg-blue-500 text-white rounded-lg whitespace-nowrap">卡片 1</div>
    <div class="px-6 py-3 bg-green-500 text-white rounded-lg whitespace-nowrap">卡片 2</div>
    <div class="px-6 py-3 bg-purple-500 text-white rounded-lg whitespace-nowrap">卡片 3</div>
    <div class="px-6 py-3 bg-orange-500 text-white rounded-lg whitespace-nowrap">卡片 4</div>
  </Marquee>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'
</script>

Logo 展示墙 ​

技术栈展示

🟢
Vue
⚛️
React
🔷
TypeScript
⚡
Vite
🎨
Tailwind
🟩
Node.js
🐳
Docker
📦
Git
🟢
Vue
⚛️
React
🔷
TypeScript
⚡
Vite
🎨
Tailwind
🟩
Node.js
🐳
Docker
📦
Git
vue
<template>
  <div class="py-8 bg-gray-50 dark:bg-gray-900 rounded-lg">
    <h3 class="text-center text-xl font-bold mb-8!">技术栈展示</h3>
    <Marquee :fade="true" :pauseOnHover="true" className="gap-12">
      <div 
        v-for="tech in technologies" 
        :key="tech.name"
        class="flex flex-col items-center justify-center px-8"
      >
        <div class="w-16 h-16 flex items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-md mb-2 transition-transform hover:scale-110">
          <span class="text-3xl">{{ tech.icon }}</span>
        </div>
        <span class="text-sm font-medium whitespace-nowrap">{{ tech.name }}</span>
      </div>
    </Marquee>
  </div>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'

const technologies = [
  { name: 'Vue', icon: '🟢' },
  { name: 'React', icon: '⚛️' },
  { name: 'TypeScript', icon: '🔷' },
  { name: 'Vite', icon: '⚡' },
  { name: 'Tailwind', icon: '🎨' },
  { name: 'Node.js', icon: '🟩' },
  { name: 'Docker', icon: '🐳' },
  { name: 'Git', icon: '📦' }
]
</script>

评价滚动 ​

张
张三
★★★★★

非常好用的组件，性能优秀！

李
李四
★★★★★

简单易用，文档清晰。

王
王五
★★★★☆

完美解决了我的需求。

赵
赵六
★★★★★

推荐使用，效果很棒！

张
张三
★★★★★

非常好用的组件，性能优秀！

李
李四
★★★★★

简单易用，文档清晰。

王
王五
★★★★☆

完美解决了我的需求。

赵
赵六
★★★★★

推荐使用，效果很棒！

vue
<template>
  <Marquee :fade="true" :pauseOnHover="true" className="gap-6">
    <div 
      v-for="review in reviews" 
      :key="review.id"
      class="w-80 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg"
    >
      <div class="flex items-center gap-3 mb-4">
        <div class="w-12 h-12 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-bold text-lg">
          {{ review.name.charAt(0) }}
        </div>
        <div>
          <div class="font-semibold">{{ review.name }}</div>
          <div class="text-yellow-500">
            {{ '★'.repeat(review.rating) }}{{ '☆'.repeat(5 - review.rating) }}
          </div>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400">{{ review.content }}</p>
    </div>
  </Marquee>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'

interface Review {
  id: number
  name: string
  content: string
  rating: number
}

const reviews: Review[] = [
  {
    id: 1,
    name: '张三',
    content: '非常好用的组件，性能优秀！',
    rating: 5
  },
  {
    id: 2,
    name: '李四',
    content: '简单易用，文档清晰。',
    rating: 5
  },
  {
    id: 3,
    name: '王五',
    content: '完美解决了我的需求。',
    rating: 4
  },
  {
    id: 4,
    name: '赵六',
    content: '推荐使用，效果很棒！',
    rating: 5
  }
]
</script>

vue3-marquee ​

基本信息 ​

特点 ​

  • ✅ 无外部依赖
  • ✅ 纯 CSS 动画
  • ✅ 水平和垂直滚动
  • ✅ 轻量级
  • ✅ TypeScript 支持

安装 ​

bash
npm install vue3-marquee@latest --save
bash
pnpm add vue3-marquee@latest
bash
yarn add vue3-marquee@latest
bash
bun add vue3-marquee@latest

全局注册 ​

typescript
// main.ts
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
import App from './App.vue'

const app = createApp(App)
app.use(Vue3Marquee)
app.mount('#app')

局部注册 ​

vue
<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

基础用法 ​

vue
<template>
  <Vue3Marquee>
    <div v-for="i in 10" :key="i" class="px-4 py-2 mx-2 bg-cyan-100 text-cyan-800 rounded whitespace-nowrap">
      基础滚动 {{ i }}
    </div>
  </Vue3Marquee>
</template>

<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

垂直滚动 ​

vue
<template>
  <div class="h-[300px] overflow-hidden">
    <Vue3Marquee :vertical="true" :duration="15">
      <div v-for="i in 8" :key="i" class="py-3 px-4 my-2 bg-emerald-100 text-emerald-800 rounded whitespace-nowrap">
        垂直滚动内容 {{ i }}
      </div>
    </Vue3Marquee>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

控制速度 ​

快速滚动（10秒）

慢速滚动（30秒）

vue
<template>
  <div class="space-y-4">
    <!-- 快速 -->
    <div>
      <h3 class="text-sm font-medium mb-3!">快速滚动（10秒）</h3>
      <Vue3Marquee :duration="10">
        <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-red-100 text-red-800 rounded whitespace-nowrap">
          快速 {{ i }}
        </div>
      </Vue3Marquee>
    </div>

    <!-- 慢速 -->
    <div>
      <h3 class="text-sm font-medium mb-3!">慢速滚动（30秒）</h3>
      <Vue3Marquee :duration="30">
        <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-amber-100 text-amber-800 rounded whitespace-nowrap">
          慢速 {{ i }}
        </div>
      </Vue3Marquee>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

暂停和恢复 ​

vue
<template>
  <div>
    <button 
      @click="paused = !paused" 
      class="mb-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors"
    >
      {{ paused ? '▶️ 恢复' : '⏸️ 暂停' }}
    </button>
    
    <Vue3Marquee :pause-on-hover="true" :paused="paused">
      <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-violet-100 text-violet-800 rounded whitespace-nowrap">
        可控制的滚动 {{ i }}
      </div>
    </Vue3Marquee>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Vue3Marquee } from 'vue3-marquee'

const paused = ref(false)
</script>

克隆数量 ​

短内容（克隆5次）

长内容（默认克隆）

vue
<template>
  <div class="space-y-4">
    <!-- 短内容需要更多克隆 -->
    <div>
      <h3 class="text-sm font-medium mb-3!">短内容（克隆5次）</h3>
      <Vue3Marquee :clone="5">
        <div class="px-4 py-2 mx-2 bg-pink-100 text-pink-800 rounded whitespace-nowrap">
          短内容
        </div>
      </Vue3Marquee>
    </div>

    <!-- 长内容使用默认克隆数 -->
    <div>
      <h3 class="text-sm font-medium mb-3!">长内容（默认克隆）</h3>
      <Vue3Marquee>
        <div v-for="i in 10" :key="i" class="px-4 py-2 mx-2 bg-sky-100 text-sky-800 rounded whitespace-nowrap">
          这是一段很长的内容 {{ i }}
        </div>
      </Vue3Marquee>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

反向滚动 ​

vue
<template>
  <Vue3Marquee direction="reverse">
    <div v-for="i in 8" :key="i" class="px-4 py-2 mx-2 bg-rose-100 text-rose-800 rounded whitespace-nowrap">
      反向滚动 {{ i }}
    </div>
  </Vue3Marquee>
</template>

<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

渐变遮罩 ​

vue
<template>
  <div class="relative">
    <!-- 左侧渐变 -->
    <div class="absolute left-0 top-0 bottom-0 w-20 bg-linear-to-r from-white dark:from-gray-900 to-transparent z-10"></div>
    
    <!-- 跑马灯 -->
    <Vue3Marquee :pause-on-hover="true">
      <div 
        v-for="i in 10" 
        :key="i"
        class="px-6 py-4 mx-2 bg-linear-to-r from-blue-500 to-purple-600 text-white rounded-lg whitespace-nowrap"
      >
        项目 {{ i }}
      </div>
    </Vue3Marquee>
    
    <!-- 右侧渐变 -->
    <div class="absolute right-0 top-0 bottom-0 w-20 bg-linear-to-l from-white dark:from-gray-900 to-transparent z-10"></div>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from 'vue3-marquee'
</script>

对比选择 ​

特性@selemondev/vue3-marqueevue3-marquee
安装大小中等小
依赖有无
淡入淡出✅ 内置⚠️ 需自定义 CSS
方向控制✅✅
垂直滚动❌✅
暂停控制✅✅
Tailwind 集成✅ 优秀⚠️ 需自定义
TypeScript✅✅
自定义样式✅ 灵活✅ 灵活
文档完善完善

推荐使用场景 ​

使用 @selemondev/vue3-marquee ​

  • ✅ 使用 Tailwind CSS
  • ✅ 需要淡入淡出效果
  • ✅ 需要更现代的 UI
  • ✅ 水平滚动场景
  • ✅ 需要开箱即用的美观效果

使用 vue3-marquee ​

  • ✅ 需要轻量级方案
  • ✅ 需要垂直滚动
  • ✅ 无外部依赖要求
  • ✅ 简单的滚动需求
  • ✅ 需要纯 CSS 动画

常见应用场景 ​

1. 公告栏 ​

📢系统公告
系统将于今晚 22:00-23:00 进行维护升级
新功能上线：支持暗黑模式主题切换
欢迎使用 Vue 3 跑马灯组件
性能优化：页面加载速度提升 50%
系统将于今晚 22:00-23:00 进行维护升级
新功能上线：支持暗黑模式主题切换
欢迎使用 Vue 3 跑马灯组件
性能优化：页面加载速度提升 50%
vue
<template>
  <div class="g-linear-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 border-l-4 border-blue-500 p-4 rounded-lg">
    <div class="flex items-center gap-2 mb-3!">
      <span class="text-2xl">📢</span>
      <span class="font-semibold">系统公告</span>
    </div>
    <Marquee :pauseOnHover="true">
      <div 
        v-for="(notice, index) in notices" 
        :key="index"
        class="px-6"
      >
        <span class="inline-flex items-center gap-2 whitespace-nowrap">
          <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
          {{ notice }}
        </span>
      </div>
    </Marquee>
  </div>
</template>

<script setup lang="ts">
import Marquee from '@selemondev/vue3-marquee'
import '@selemondev/vue3-marquee/dist/index.css'

const notices = [
  '系统将于今晚 22:00-23:00 进行维护升级',
  '新功能上线：支持暗黑模式主题切换',
  '欢迎使用 Vue 3 跑马灯组件',
  '性能优化：页面加载速度提升 50%'
]
</script>

2. 合作伙伴展示 ​

vue
<template>
  <Marquee :fade="true" className="gap-12">
    <img v-for="logo in logos" :key="logo" :src="logo" class="h-16" />
  </Marquee>
</template>

3. 实时数据滚动 ​

vue
<template>
  <Vue3Marquee :vertical="true" :duration="20">
    <div v-for="item in dataList" :key="item.id" class="py-2">
      {{ item.text }}
    </div>
  </Vue3Marquee>
</template>

4. 产品展示 ​

vue
<template>
  <Marquee :pauseOnHover="true" className="gap-6">
    <div 
      v-for="product in products" 
      :key="product.id"
      class="w-64 p-4 bg-white rounded-lg shadow"
    >
      <img :src="product.image" class="w-full h-48 object-cover rounded" />
      <h3 class="mt-2 font-semibold">{{ product.name }}</h3>
      <p class="text-gray-600">{{ product.price }}</p>
    </div>
  </Marquee>
</template>