本文实例为大家分享了vue开发实现跑马灯效果组件的具体代码，供大家参考，具体内容如下
用vue编写一个可以快进后退的跑马灯组件
由于业务需求，要实现一个会可以控制速度的跑马灯，初开始用js的setinterval每隔几毫秒来减取一个字符拼接到后面，效果不理想就放弃了。后查询用js的animate这个api改造大功告成！
效果图
组件代码
<template> <div class="marquee" @mouseover="pause(true)" @mouseleave="pause()"> <i class="marquee-btn btn-left el-icon-d-arrow-left" @mousedown="speedUp(true)" @mouseup="speedStop()" ></i> <div ref="marqueeText" class="marquee-text"> <div v-if="itemClick"> <span v-for="item in text.split(splitSymbol)" :key="item" @click="$emit('itemClickEvent', item)" >{{item + ' 、'}}</span> </div> <div v-else>{{text}}</div> </div> <i class="marquee-btn btn-right el-icon-d-arrow-right" @mousedown="speedUp()" @mouseup="speedStop()" ></i> </div> </template> <script> export default { name: "marquee", props: { text: { type: String, required: true }, speed: { type: Number, required: false, default: 110 }, // 是否每个都可以点击触发事件 itemClick: { type: Boolean, required: false, default: false }, // 每个触发事件元素的分割符号 splitSymbol: { type: String, required: false, default: '' } }, data() { return { aniInstance: null, speedTimer: null }; }, methods: { setAnimate() { const contentWidth = this.$refs.marqueeText.scrollWidth; const keyframes = [ { transform: "translateX(100%)" }, { transform: `translateX(-${contentWidth}px)` } ]; const animateOptions = { duration: (contentWidth / this.speed) * 1000, iterations: Infinity, easing: "linear" }; this.aniInstance = document.querySelector(".marquee-text").animate(keyframes, animateOptions); }, /** * 快进 * @param { Boolean } isLeft 是否为左方向 */ speedUp(isLeft = false) { const set = () => { if (this.aniInstance.currentTime > 0) { this.aniInstance.currentTime = this.aniInstance.currentTime + (isLeft ? 2000 : -2000); this.aniInstance.currentTime <= 0 && (this.aniInstance.currentTime = 0); } } // 鼠标单击 set(); // 鼠标长按 this.speedTimer = setInterval(() => { set() }, 100); }, // 快进停止 speedStop() { clearInterval(this.speedTimer); this.speedTimer = null; }, /** * 暂停、播放 * @param { Boolean } isPause 是否暂停 */ pause(isPause = false) { this.aniInstance[["play", "pause"][Number(isPause)]](); } }, mounted() { this.$nextTick(() => { this.setAnimate(); }); } }; </script> <style lang="less" scoped> .marquee { position: relative; padding: 10px 0; overflow: hidden; width: 100%; font-size: 16px; color: #fff; background-image: linear-gradient( to left, #b9565e, #cb655a, #da7655, #e58a50, #eb9f4b ); &:hover .marquee-btn { opacity: 1; } } .marquee-btn { position: absolute; top: 50%; transform: translateY(-50%); padding: 15px; color: #fff; background: rgba(1, 1, 1, 0.4); z-index: 999; cursor: pointer; opacity: 0; transition: all 0.2s linear; } .btn-left { left: 0; } .btn-right { right: 0; } .marquee-text { white-space: nowrap; span { &:hover { cursor: pointer; color: #2c3e50; } } } </style> 父组件代码
<Marquee :text="overdueInfo.content" :itemClick="true" :speed="120" splitSymbol="、" @itemClickEvent="marqueeSearch" class="marquee-box__container" ></Marquee>