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

2022-12-07 14:00:32

如何使用vue-baberrage生成彈幕

vue-baberrage這個外掛本身有好多屬性使用後不生效，不知道是不是自己使用的問題 T_T

安裝彈幕外掛；

npm install vue-baberrage --save

建立vue元件，在元件中參照vue-baberrage；

  import Vue from 'vue';
  import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
  Vue.use(vueBaberrage);

html部分；

其中有幾個屬性設定後不生效，自己測試下吧；

<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',
    //接收父元件傳遞過來的陣列資料
    props:{
      barrage:{
        type:Array,
        required:true
      }
    },
    data() {
      return {
        barrageIsShow: true,
        messageHeight: 50,
        boxHeight: 150,
        barrageLoop: true,
        boxWidth:800,           //彈幕寬度
        maxWordCount: 300,
        throttleGap: 5000,       //訊息間隔
        barrageList: [],
        barrage1: [],
      };
    },
    //因為父元件那邊介面執行會比元件生成慢，所以用watch監聽賦值
    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: ''
          });
        });
      },
      // 生成指定亂數，作用於每條彈幕的速度
      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;*/
  }
  //強行改變彈幕背景色
  .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>

就這把，都是我改過原來的樣式，跟原本的有差距，想要原本樣式，可以檢視他的檔案

git檔案地址：https://gitee.com/hoseapps/vue-baberrage