Vue3简单的跑马灯组件

vue3-marquee是基于Vue3的简单的跑马灯组件，可以创建可定制的跑马灯效果。该组件为您的内容使用插槽，提供多种配置选项来控制跑马灯的效果。

安装

// npm
npm install vue3-marquee@latest --save
 
// yarm
yarn add vue3-marquee@latest

全局使用：在main.js中引入插件。

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
 
createApp(App).use(Vue3Marquee).mount('#app')

或者可以在组件中局部调用

import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
 
export default {
  components: {
    Vue3Marquee,
  },
}

完整代码应该如下所示：

<template>
  <vue3marquee>
    <img height="200" width="300" src="...img">
    <img height="200" width="300" src="...img">
    <img height="200" width="300" src="...img">
  </vue3marquee>
</template>
 
<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
 
export default {
  components: {
    Vue3Marquee,
  },
}
</script>