vue-baberrage vue組件使用

vue-baberrage
vue組件使用

<template>
  <div class="barrages>
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
      :lanesCount="lanesCount"
    >
    </vue-baberrage>
  </div>
</template>
<script>
import Vue from "vue";
import { vueBaberrage, MESSAGE_TYPE } from "vue-baberrage";

Vue.use(vueBaberrage);

export default {
  // 弹幕重叠：高度调大数量调小
  name: "Barrages",
  data() {
    return {
      msg: "就是个辣鸡~就是个辣鸡~就是个辣鸡~",
      barrageIsShow: true,
      // 消息框全顯示的高度
      messageHeight: 30,
      boxHeight: 412,
      barrageLoop: true,
      maxWordCount: 120,
      throttleGap: 5000,
      barrageList: [],
      lanesCount: 4,
    };
  },
  computed: {
    // posRender(){
    //   return 3
    // }
  },
  mounted() {
    this.addToList();
  },
  methods: {
    addToList() {
      let list = [
        {
          id: 1,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 3,
          barrageStyle: "red",
        },
        {
          id: 2,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "green",
        },
        {
          id: 3,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 3,
          barrageStyle: "normal",
        },
        {
          id: 4,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "blue",
        },
        {
          id: 5,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 3,
          barrageStyle: "red",
        },
        {
          id: 6,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "normal",
        },
        {
          id: 7,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "red",
        },
        {
          id: 8,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "normal",
        },
        {
          id: 9,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "red",
        },
        {
          id: 10,
          avatar:
            "https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "yellow",
        },
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle,
        });
      });
    },
  },
};
</script>
<style lang="scss">
.barrages-drop {
  .blue {
    border-radius: 50px;
    background: #e6ff75;
    color: #fff;
  }

  .green {

    border-radius: 50px;
    background: #75ffcd;
    color: #fff;
  }
  .red {

    border-radius: 50px;
    background: #e68fba;
    color: #fff;
  }
  .yellow {

    border-radius: 50px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 512px;
    overflow: hidden;
    top: 0;
    margin-top: 130px;
    background: pink;
    font-size: 15px;
  }
}
</style>

屬性⭐
lanesCount

• Default: 0
• Acceptable-Values: Number
• Function: 泳道的数量。