Vue3 Marquee 滚动组件教程

最新推荐文章于 2025-05-06 18:20:25 发布

原创最新推荐文章于 2025-05-06 18:20:25 发布

· 1.8k 阅读

8 ·

版权

Vue3 Marquee 滚动组件教程

项目地址:https://gitcode.com/gh_mirrors/vu/vue3-marquee

1. 项目介绍

Vue3 Marquee 是一个简单易用的 Vue.js 组件，它允许您只需几行代码就能创建自定义滚动 marquees。该组件旨在提供响应式、可定制的移动友好的图片、文本或自定义HTML内容的轮播/滑块功能。支持设置速度、间距、方向，还可以轻松控制暂停和恢复滚动。

2. 项目快速启动

安装

首先确保您的项目中已经安装了 Vue3。然后通过npm或yarn添加 vue3-marquee 到您的项目：

# 使用npm
npm install vue3-marquee-slider@latest

# 或者使用yarn
yarn add vue3-marquee-slider@latest

引入组件

在您的主入口文件（如 main.js）中全局注册组件：

// 如果使用ES模块导入
import { createApp } from 'vue'
import App from './App.vue'

// 导入组件并全局注册
import VueMarqueeSlider from 'vue3-marquee-slider'
import 'vue3-marquee-slider/dist/style.css'

createApp(App).component('VueMarqueeSlider', VueMarqueeSlider).mount('#app')

或者，在单个组件内局部注册：

<template>
  <div>
    <vue-marquee-slider :speed="1000" :width="50">
      <!-- 添加滚动内容 -->
    </vue-marquee-slider>
  </div>
</template>

<script>
import VueMarqueeSlider from 'vue3-marquee-slider'
import 'vue3-marquee-slider/dist/style.css'

export default {
  components: {
    VueMarqueeSlider,
  },
}
</script>

示例用法

下面是如何使用该组件显示一组图片的例子：

<vue-marquee-slider id="marquee-slider-loop" :speed="1000" :width="50" :loop="true">
  <img v-for="(image, index) in images" :key="index" :src="image.url" />
</vue-marquee-slider>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'image-url-1' },
        { url: 'image-url-2' },
        // 更多图片...
      ],
    };
  },
};
</script>