SoFunction
Updated on 2025-04-05

Implement a barrage component based on Vue design

1. About barrage design ideas

1.1 Business Layer | View Layer (Global Component)

From a business perspective, if you are designing a global barrage component, you need to consider the following points.

  • The height of the container?
  • Container hierarchy division?
  • In the way of rendering the barrage, what data should the person using the component pass?
  • Is it supported for full screen barrage?
  • Is it supported to turn off and turn on the barrage?
  • Do I need to reset the barrage?
  • Is it supported to pause the barrage?
  • Is it necessary to integrate sending?

After the design plan is fully considered, you will be able to start thinking about the design of the data layer

1.2 Data layer

From a data perspective, each barrage is nothing more than oneelement, and then put the barrage content into thiselementIn the element, and giveelementAdd animation, then next, you should consider it like this.

  • Is a barrage a JS object? What are its properties?
  • Who manages these barrage? How can he support pause and close?
  • How do you merge the data in the background with some static data in your front desk to create a complete object?
  • How do you render these barrage?
  • How many seconds do you want to create a barrage and display and run it in a container?
  • What flexible attributes does the barrage have?Run animation time, customize the barrage style released by the user? Or, you need to consider how many barrages need to run in ballistics, etc.

After the data design is fully considered, you can start to consider itData ManagementDesign

1.3 Data Management Layer

From a management perspective, if you call certain methods from the outside world, you can respond quickly to operations, such as external callsopenMethod, you play the barrage and callStopMethod, you close the barrage. Next, you should consider the following points.

  • What methods should be provided and what functions should object-oriented design be provided?
  • The specified method is called, how should the data be operated on.
  • How to optimize performance of barrage?

At this point, our design plan is basically completed, and we can start writing code next.

2. Code implementation

2.1 Data layer design solution implementation

We need to build aBarrageClass, every time we create a barragenew Barrage, let him help us generate some barrage attributes.

export class Barrage {
  constructor(obj) {
  // Every time new Barrage() passes in a data object returned by the background obj    const { barrageId, speed, level, top, jumpUrl, barrageContent, animationPlayState, ...args } = obj
     = barrageId; // id: The unique id of each barrage     = speed; // speed: The speed of the barrage operation, controlled by the outside world     = level; // level: The level of the barrage --> The barrage can be divided into designs and can be divided into two levels: upper and lower 1 and 1, which can determine whether the barrage display is full screen or half screen display     = top; // top: The position generated by the barrage is determined relative to the level, relative to the level of the box, the position from the top of the box relative to the Level level     = jumpUrl; // jumpUrl: Click the link that needs to be redirected by clicking the barrage     = barrageContent; // barrageContent: content of the barrage     = ''; // Design barrage Is it OK to click the pause function     = '#FFF' // Barrage color = args // All data attributes except the Barrage class are thrown here, such as data returned in the background  }
}

2.2 Implementation of data management layer design scheme

We have implemented the functions of adding, deleting, initializing, resetting, closing, and turning on the barrage.

1. Realize the barrage opening function

export class BarrageManager {
constructor(barrageVue) {
     = []; // Fill in the array of barrage     = [] // Batch delete array id of barrage     = [] // Source barrage data     = null //Control the opening and closing of the barrage     = barrageVue // Barrage component example     = 0, // Total number of destroyed barrage     = 0, // The final amount of destructible     = 0,
     = 0
  }
  init(barrages) {
     = barrages
     = parseInt( / ) // Calculate the number of deletable     =  %  // Calculate the last time you can delete  }
   /**
    *
    * @param {*} barrages Receive a barrage array data
    * @description loop creates a barrage object, combining background data with the properties of creating barrage and saving it into the barrage array
    */
  loopCreateBarrage(barrages) {
    const { rows, createTime, crearteBarrageObject } = 
    let maxRows = rows / 2 // The maximum number of barrage lines     = setInterval(() => {
      for (let i = 0; i < 1; i++) {
        let barrageItem = barrages[]
        if ( >= maxRows) {  = 0 } // If the critical point of the maximum number of barrage lines has been reached, then return to line 0 and continue to create        if (!barrageItem) return clearInterval() // If you cannot get it, it proves that there is no data, and the barrage display ends        const item = crearteBarrageObject({ row: , ...barrageItem }) // Add object to the barrage array        (item)
        ++ // Used to get the value, how many pieces have been taken        ++ // For ballistic      }
    }, createTime * 1000);
  }
   /**
    * @param {*} barrages Pass in a barrage array data
    * @returns No return value
    * @description Call this method to start playing the barrage
    */
  open(barrages) {
    if ( === 0) return
    (barrages)
    ()
    }
}

Here we initialize an open method, receive an array, and callinitMethod: Do the initialization operation and call the method created by loop. Create a barrage in seconds without creatingTime and add it to the barrage array.

2. Connect to view layers

2.3 View layer | Business layer design solution implementation

<template>
  <div class="barrage">
    <div class="barrage-container" ref="barrageContainer">
      <div class="barrage-half-screen" ref="halfScreenContainer">
        <template v-for="item in barrageFiltering.level1">
          <barrage-item 
            :item="item" :class="{pausedAnimation : paused }" 
            :options='barrageTypeCallback(item)' 
            @destory="destoryBraageItem" :key="">
          </barrage-item>
        </template>
      </div>
      <div class="barrage-full-screen" v-if="fullScreen">
        <template v-for="item in barrageFiltering.level2">
          <barrage-item 
            :item="item" :class="{pausedAnimation : paused }"
            :options='barrageTypeCallback(item)'
            @destory="destoryBraageItem" :key="">
          </barrage-item>
        </template>
      </div>
    </div>
    <user-input ref="publishBarrage" v-if="openPublishBarrage" @onBlur="handleBlur">
      <template #user-operatio-right>
        <!-- Handle compatibility issues ios and Android Trigger click event -->
        <div class="send" @click="sendBarrage($event)" v-if="IOS">
          <slot name="rightRegion"></slot>
        </div>
        <div class="send" @mousedown="sendBarrage($event)" v-else>
          <slot name="rightRegion"></slot>
        </div>
      </template>
    </user-input>
  </div>
</template>
export default {
  created () {
     = new BarrageManager(this)
  },
  mounted() {
    // Initialize the barrage rendering data    ();
  },
  data() {
    return {
      barrageManager : null,
      isClickSend: false,
      paused : false
    };
  },
  methods : {
    initBarrageRenderData() {
      ();
    },
  },
  computed : {
   barrageFiltering() {
      return {
        level1:
          (
            item =>  === barrageLevel.LEVEL1
          ) || [],
        level2:
          (
            item =>  === barrageLevel.LEVEL2
          ) || []
      };
    },
  }
}

Review of view layer knowledge points

Here we created a barrage component when creating itBarrage management object, and the following barrage rendering data was initialized during mount, so we calledBarrage ManagementofopenMethod, so that when the component is mounted, it will be renderedbarrageFilteringWe got the data here in the management categoryIn managementThe data created by loop.

Open method implementation

At this point, the opening of our barrage has basically been completed. It can be seen that if you designed it like this, you only need to call some methods of the management class in the component, and it can help you complete some functions.

3. Implement the barrage shutdown function

 class BarrageManager {
 constructor(barrageVue) {
     = []; // Fill in the array of barrage     = [] // Batch delete array id of barrage     = [] // Source barrage data     = null //Control the opening and closing of the barrage     = barrageVue // Barrage component example     = 0, // Total number of destroyed barrage     = 0, // The final amount of destructible     = 0,
     = 0
  }
 /**
    * @return No return value
    * @description Call the close method Close the barrage
    */
  close() {
    clearInterval()
    ()
  }
   /**
    * @description Delete all barrage data
    */
  removeAllBarrage() {
     = []
  }
 }

Close the feature knowledge points review

Here we can see that the function of closing the barrage is actually very simple. You just need to turn off the timer when the barrage is turned on and clear the barrage array data.

4. Implement the function of adding barrage

  addBarrage(barrageContent) {
      // Get the line that the current timer is creating      let currentRow = ();
      let row = currentRow ===  / 2 ? 0 : currentRow + 1;
      if (row ===  / 2) {
        row = 0;
      }
      let myBarrage = {
        row,
        barrageId: '1686292223004',
        barrageContent,
        style: ,
        type: "mySelf", // Type of barrage published by users        barrageCategory: 
      };
      const item = (myBarrage);
      (item); // The data is ready Call the Add Method      ("Send successfully")
      (row + 1);
    },

 class BarrageManager {
 constructor(barrageVue) {
     = []; // Fill in the array of barrage     = [] // Batch delete array id of barrage     = [] // Source barrage data     = null //Control the opening and closing of the barrage     = barrageVue // Barrage component example     = 0, // Total number of destroyed barrage     = 0, // The final amount of destructible     = 0,
     = 0
  }
   /**
    *
    * @param {*} obj Merge the complete barrage object
    * @param {...any} args The remaining parameters that developers may need to pass in the future
    */
  addBarrage(obj, ...args) {
    const barrage = new Barrage(obj, ...args)
    (barrage)
  }
 }

Review of Add Function Knowledge Points

Here we can see that when adding, we only need to call the componentaddBarrageThe method is added with barrage, and during the call process we gonew BarrageThis category is what we prepared beforeBarrage Data Class | Data Layer Design

5. Implement the barrage deletion function

class BarrageManager {
constructor(barrageVue) {
     = []; // Fill in the array of barrage     = [] // Batch delete array id of barrage     = [] // Source barrage data     = null //Control the opening and closing of the barrage     = barrageVue // Barrage component example     = 0, // Total number of destroyed barrage     = 0, // The final amount of destructible     = 0,
     = 0
  }
/**
    *
    * @param {*} barrageId // Enter the parameter barrage id
    * @returns No return value
    * @description Add ids that need to be deleted in batches to the stack of batches deletion barragesIds
    */
  addBatchRemoveId(barrageId) {
    (barrageId)
    ()
  }
  /**
    *
    * @param {*} start You need to delete it from which position
    * @param {*} deleteCount // What is the total number of deletes
    * @returns No return value
    */
  batchRemoveBarrage(start, deleteCount) {
    if ( === 0) return
    (start, deleteCount)
  }
  batchRemoveId(start, deleteCount) {
    if ( === 0) return
    (start, deleteCount)
  }
  /**
    * @param {*} barrageId barrage id Used when deleting barrage in a single
    */
  removeBarrage(barrageId) {
    let index = (item =>  === barrageId)
    (index, 1)
  }
  /**
    * @description Delete all barrage data
    */
  removeAllBarrage() {
     = []
  }
  // Batch removal logic processing  batchRemoveHandle() {
    if ( === 0 ||  === 0) {
      if ( === ) {
        (0, )
        (0, )
      }
    } else {
      if ( === ) {
        (0, )
        (0, )
        --
      }
    }
  }
}

Review of deleted function knowledge points

Here we can see that when deleting, we add each barrage id to an array. When the barrage id array length reaches the number I want to delete, call itspliceMethod: Perform batch deletion operations. When data is updated, the view will also be updated. In this way, we only need to perform the dom operation once, and we do not need to delete the barrage and update the dom every time, causing unnecessary performance consumption.

6. Implement the barrage reset function

At this point, I believe you have understood my design. If you now let you implement a reset barrage method, what would you do? Is it just necessary to call itcloseMethod , then callopenJust the method, ok Next I will put the full version of the code into my github repository, and friends can pull itWarehouse link,The specific code needs to be read from the beginning by friends. This is only part of the content. After reading, you will fully understand it.

About the barrageTypeCallback function

This method can mainly solve the problem of barrage style customization. You can return different style objects according to the type of each barrage, and we will automatically render it for you.

barrageTypeCallback ( {args} ) {
 const { barrageCategary } = args
 if(barrageCategary === 'type1'){
 retun {
 className : 'classOne',
 children : {
     show : false
     i : {
     showIcon : false,
     style : {
     color : 'red'
     }
     }
    }
   }
 }
 else{
 return { className : 'default' }
 }
}

The above is the detailed content of implementing a barrage component based on Vue design. For more information about Vue barrage components, please pay attention to my other related articles!