vue實現(xiàn)可以快進后退的跑馬燈組件
本文實例為大家分享了vue開發(fā)實現(xiàn)跑馬燈效果組件的具體代碼,供大家參考,具體內(nèi)容如下
用vue編寫一個可以快進后退的跑馬燈組件
由于業(yè)務(wù)需求,要實現(xiàn)一個會可以控制速度的跑馬燈,初開始用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 ? ? }, ? ? // 是否每個都可以點擊觸發(fā)事件 ? ? itemClick: { ? ? ? type: Boolean, ? ? ? required: false, ? ? ? default: false ? ? }, ? ? // 每個觸發(fā)事件元素的分割符號 ? ? 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); ? ? ? ? } ? ? ? } ? ? ? // 鼠標(biāo)單擊 ? ? ? set(); ? ? ? // 鼠標(biāo)長按 ? ? ? 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element-plus的自動導(dǎo)入和按需導(dǎo)入方式詳解
之前使用 ElementPlus 做項目的時候,由于不會使用按需引入耽誤了不少時間,這篇文章主要給大家介紹了關(guān)于element-plus自動導(dǎo)入和按需導(dǎo)入的相關(guān)資料,需要的朋友可以參考下2022-08-08關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02VUE UPLOAD 通過ACTION返回上傳結(jié)果操作
這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結(jié)果操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue路由第二次進入頁面created和mounted不執(zhí)行問題及解決
這篇文章主要介紹了vue路由第二次進入頁面created和mounted不執(zhí)行問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12