欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中如何使用vue-baberrage生成彈幕

 更新時(shí)間:2022年12月06日 15:18:44   作者:她和海水一樣咸  
這篇文章主要介紹了vue中如何使用vue-baberrage生成彈幕,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

如何使用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-i18n 切換中英文效果

    使用 vue-i18n 切換中英文效果

    這篇文章主要介紹了使用 vue-i18n 切換中英文效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • vue實(shí)現(xiàn)員工信息錄入功能

    vue實(shí)現(xiàn)員工信息錄入功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)員工信息錄入功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件

    Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件

    這篇文章主要介紹了Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue.js按鍵修飾符及v-model修飾符示例詳解

    Vue.js按鍵修飾符及v-model修飾符示例詳解

    這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-05-05
  • Vue 技巧之控制父類(lèi)的 slot

    Vue 技巧之控制父類(lèi)的 slot

    插槽(Slot)是Vue提出來(lái)的一個(gè)概念,正如名字一樣,插槽用于決定將所攜帶的內(nèi)容,插入到指定的某個(gè)位置,從而使模板分塊,具有模塊化的特質(zhì)和更大的重用性。
    2020-02-02
  • 淺談vue+vite項(xiàng)目部署會(huì)遇到的幾個(gè)問(wèn)題

    淺談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-04
  • Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題)

    Vue3封裝自動(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-05
  • vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例

    vue項(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-12
  • vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能(流程詳解)

    vue實(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
  • vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn)

    vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評(píng)論