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

更新時間：2022年12月06日 15:18:44 作者：她和海水一樣咸

這篇文章主要介紹了vue中如何使用vue-baberrage生成彈幕，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何使用vue-baberrage生成彈幕

vue-baberrage這個插件本身有好多屬性使用后不生效，不知道是不是自己使用的問題 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部分；

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

<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',
? ? //接收父組件傳遞過來的數(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: [],
? ? ? };
? ? },
? ? //因為父組件那邊接口執(zhí)行會比組件生成慢，所以用watch監(jiān)聽賦值
? ? 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: ''
? ? ? ? ? });
? ? ? ? });
? ? ? },
? ? ? // 生成指定隨機數(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;*/
? }
? //強行改變彈幕背景色
? .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

vue彈幕實現(xiàn)及優(yōu)化

起因： 活動需求需要使用彈幕的形式展示內(nèi)容

解決：首先是找到一個vue-baberrage

然后使用起來看起來也沒有什么問題，最后當我打開瀏覽器rendering的paint flash發(fā)現(xiàn)重繪嚴重

最后找到一個vue-danmaku 組件，發(fā)現(xiàn)不會頻繁重繪

定位：彈幕移動使用transform改變位置，并使用will-change進行優(yōu)化

will-change屬性通過告訴瀏覽器什么屬性、什么元素將會發(fā)生變化，可以對這些操作進行可能性的優(yōu)化，由此提高CSS動畫的執(zhí)行效率

大量的節(jié)點動畫渲染可以選擇canvas或者webgl進行開發(fā)

聲明： 我不是這兩者的開發(fā)者，只是使用者，如有錯誤，歡迎指出

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue實戰(zhàn)記錄之登陸頁面的實現(xiàn)
最近學習過程中常碰到讓用戶登錄注冊這種,這篇文章主要給大家介紹了關于Vue實戰(zhàn)記錄之登陸頁面實現(xiàn)的相關資料,需要的朋友可以參考下
2021-06-06
vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻)
這篇文章主要介紹了vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-03
Vue打包后靜態(tài)資源圖片失效徹底解決的終極指南
文章詳細分析了Vue項目中靜態(tài)資源路徑失效的問題,包括開發(fā)、構建、部署等階段的常見原因,并提供了多種解決方案,旨在幫助開發(fā)者系統(tǒng)性地解決靜態(tài)資源路徑問題,構建穩(wěn)定可靠的前端應用,需要的朋友可以參考下
2025-03-03
vue3封裝數(shù)字滾動組件的實現(xiàn)示例
本文主要介紹了vue3封裝數(shù)字滾動組件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-08-08
關于vue 項目中瀏覽器跨域的配置問題
這篇文章主要介紹了vue 項目中瀏覽器跨域的配置問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-11
vue中的錨點定位問題
這篇文章主要介紹了vue中的錨點定位問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
使用babel-plugin-import?實現(xiàn)自動按需引入方式
這篇文章主要介紹了使用babel-plugin-import?實現(xiàn)自動按需引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
淺析為什么Vue使用虛擬DOM
Vue?使用虛擬?DOM?的初衷不僅是為了性能優(yōu)化,更重要的是為了解決開發(fā)效率和靈活性的問題,下面我們就來探討一下虛擬DOM的作用與原理吧
2024-12-12
在Vue項目中引入騰訊驗證碼服務的教程
這篇文章主要介紹了在Vue項目中引入騰訊驗證碼服務的教程,需要的朋友可以參考下
2018-04-04