基于vue3的跑马灯组件|vue3-marquee

Posted 2023-02-08 hiapple

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

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

安装

// 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> 

效果演示