vue中如何使用vue-baberrage生成彈幕
如何使用vue-baberrage生成彈幕
vue-baberrage這個(gè)插件本身有好多屬性使用后不生效,不知道是不是自己使用的問(wèn)題 T_T
安裝彈幕插件;
npm install vue-baberrage --save
創(chuàng)建vue組件,在組件中引用vue-baberrage;
? import Vue from 'vue'; ? import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage'; ? Vue.use(vueBaberrage);
html部分;
其中有幾個(gè)屬性設(shè)置后不生效,自己測(cè)試下吧;
<template> ? <div class="barrages-drop"> ? ? <vue-baberrage ? ? ? :isShow="barrageIsShow" ? ? ? :barrageList="barrageList" ? ? ? :maxWordCount="maxWordCount" ? ? ? :throttleGap="throttleGap" ? ? ? :loop="barrageLoop" ? ? ? :boxHeight="boxHeight" ? ? ? :messageHeight="messageHeight" ? ? > ? ? </vue-baberrage> ? </div> </template>
javaScript部分;
<script> ? import Vue from 'vue'; ? import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage'; ? Vue.use(vueBaberrage); ? export default { ? ? name: 'barrages', ? ? //接收父組件傳遞過(guò)來(lái)的數(shù)組數(shù)據(jù) ? ? props:{ ? ? ? barrage:{ ? ? ? ? type:Array, ? ? ? ? required:true ? ? ? } ? ? }, ? ? data() { ? ? ? return { ? ? ? ? barrageIsShow: true, ? ? ? ? messageHeight: 50, ? ? ? ? boxHeight: 150, ? ? ? ? barrageLoop: true, ? ? ? ? boxWidth:800, ? ? ? ? ? //彈幕寬度 ? ? ? ? maxWordCount: 300, ? ? ? ? throttleGap: 5000, ? ? ? //消息間隔 ? ? ? ? barrageList: [], ? ? ? ? barrage1: [], ? ? ? }; ? ? }, ? ? //因?yàn)楦附M件那邊接口執(zhí)行會(huì)比組件生成慢,所以用watch監(jiān)聽(tīng)賦值 ? ? watch: { ? ? ? barrage: function(newVal,oldVal){ ? ? ? ? this.barrage1 = newVal; ? ? ? ? this.addToList(); ? ? ? } ? ? }, ? ? mounted() { ? ? }, ? ? methods: { ? ? ? addToList() { ? ? ? ? console.log(this.barrage1) ? ? ? ? this.barrage1.forEach((v) => { ? ? ? ? ? this.barrageList.push({ ? ? ? ? ? ? id: Math.round(Math.random()*5000), ? ? ? ? ? ? msg: v, ? ? ? ? ? ? time: this.randomNum(3,10), ? ? ? ? ? ? type: MESSAGE_TYPE.NORMAL, ? ? ? ? ? ? barrageStyle: '' ? ? ? ? ? }); ? ? ? ? }); ? ? ? }, ? ? ? // 生成指定隨機(jī)數(shù),作用于每條彈幕的速度 ? ? ? randomNum(minNum,maxNum){ ? ? ? ? switch(arguments.length){ ? ? ? ? ? case 1: ? ? ? ? ? ? return parseInt(Math.random()*minNum+1,10); ? ? ? ? ? ? break; ? ? ? ? ? case 2: ? ? ? ? ? ? return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); ? ? ? ? ? ? break; ? ? ? ? ? default: ? ? ? ? ? ? return 0; ? ? ? ? ? ? break; ? ? ? ? } ? ? ? } ? ? } ? } </script>
css部分;
<style lang="scss"> ? .baberrage-item{ ? ? /*height: .5rem!important;*/ ? } ? //強(qiáng)行改變彈幕背景色 ? .baberrage-item .normal{ ? ? background: rgba(0,0,0,0.3)!important; ? } ? .normal{ ? ? .baberrage-msg{ ? ? ? /*padding: .1rem!important;*/ ? ? } ? ? .baberrage-avatar{ ? ? ? display: none; ? ? } //彈幕前頭像不展示 ? ? img{ ?? ? ? ? display: none; ? ? } ? } ? .baberrage-avatar{ ? ? img{ ? ? ? width: 20px !important; ? ? ? height: 20px!important; ? ? } ? } ? .barrages-drop { ? ? .blue { ? ? ? border-radius: 100px; ? ? ? background: #e6ff75; ? ? ? color: #fff; ? ? } ? ? .green { ? ? ? border-radius: 100px; ? ? ? background: #75ffcd; ? ? ? color: #fff; ? ? } ? ? .red { ? ? ? background: rgba(0,0,0,0.1); ? ? ? color: red; ? ? } ? ? .yellow { ? ? ? border-radius: 100px; ? ? ? background: #dfc795; ? ? ? color: #fff; ? ? } ? ? .baberrage-stage { ? ? ? position: absolute; ? ? ? width: 100%; ? ? ? overflow: hidden; ? ? ? top: 0; ? ? } ? } </style>
就這把,都是我改過(guò)原來(lái)的樣式,跟原本的有差距,想要原本樣式,可以查看他的文檔
git文檔地址:https://gitee.com/hoseapps/vue-baberrage
vue彈幕實(shí)現(xiàn)及優(yōu)化
起因: 活動(dòng)需求需要使用彈幕的形式展示內(nèi)容
解決: 首先是找到一個(gè)vue-baberrage
然后使用起來(lái)看起來(lái)也沒(méi)有什么問(wèn)題,最后當(dāng)我打開(kāi)瀏覽器rendering的paint flash發(fā)現(xiàn)重繪嚴(yán)重
最后找到一個(gè)vue-danmaku 組件,發(fā)現(xiàn)不會(huì)頻繁重繪
定位:彈幕移動(dòng)使用transform改變位置,并使用will-change進(jìn)行優(yōu)化
will-change屬性通過(guò)告訴瀏覽器什么屬性、什么元素將會(huì)發(fā)生變化,可以對(duì)這些操作進(jìn)行可能性的優(yōu)化,由此提高CSS動(dòng)畫(huà)的執(zhí)行效率
大量的節(jié)點(diǎn)動(dòng)畫(huà)渲染可以選擇canvas或者webgl進(jìn)行開(kāi)發(fā)
聲明: 我不是這兩者的開(kāi)發(fā)者,只是使用者,如有錯(cuò)誤,歡迎指出
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件
這篇文章主要介紹了Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07淺談vue+vite項(xiàng)目部署會(huì)遇到的幾個(gè)問(wèn)題
本文主要介紹了vue+vite項(xiàng)目部署會(huì)遇到的幾個(gè)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題)
本文主要介紹了Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例
本文主要介紹了vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能(流程詳解)
無(wú)論是移動(dòng)端還是pc端登錄或者注冊(cè)界面都會(huì)見(jiàn)到手機(jī)驗(yàn)證碼登錄這個(gè)功能,輸入手機(jī)號(hào),得到驗(yàn)證碼,這篇文章主要介紹了基于vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能,需要的朋友可以參考下2019-12-12