vue封裝一個彈幕組件詳解
更新時間：2022年08月02日 09:36:43 作者：JYeontu???????
這篇文章主要介紹了vue封裝一個彈幕組件詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙可以參考一下
前言
現(xiàn)在很多地方都有使用到彈幕，最近在搗鼓自己的個人博客網(wǎng)站，也想著在里面加入一個彈幕模塊，所以在這里封裝了一個可復用的彈幕組件，目前已經(jīng)實現(xiàn)了基本的功能，可能還會有存在缺陷，后續(xù)會繼續(xù)優(yōu)化。這里給大家介紹分享一下實現(xiàn)的過程。
功能實現(xiàn)
1、獲取隨機顏色
顏色編碼是由6位16進制數(shù)組成，我們可以隨機生成6位16進制數(shù)。
隨機數(shù)生成
隨機生成[min,max]區(qū)間的數(shù)字
getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
},隨機顏色編碼生成
隨機生成6位16進制數(shù)。
getColors() {
const arr = "0123456789abcdef";
let color = "#";
let n = 6;
while (n--) color += arr[this.getRandom(0, 15)];
return color;
},2、隨機生成彈幕出現(xiàn)的高度坐標
這里我劃分了三塊區(qū)域，分別為top、center和bottom，具體劃分如下圖：
代碼如下：
getPosition(position = "") {
let content = this.content;
let height = content.offsetHeight * 0.9;
this.width =
content.offsetWidth +
(5 * content.offsetWidth) / this.time +
"px";
switch (position) {
case "top":
return this.getRandom(0, height / 3);
case "center":
return this.getRandom(height / 3, (2 * height) / 3);
case "bottom":
return this.getRandom((2 * height) / 3, height);
default:
return this.getRandom(0, height);
}
},3、格式化彈幕對象
定義的彈幕對象結(jié)構(gòu)如下：
{
text: "111",
color: "red",
position: "top" //top,center,bottom
}我們需要進行以下處理：
顏色
這里的color允許為空，為空時會自動生成隨機顏色
定位
彈幕對象傳入的position為top,center,bottom或者random，我們需要將這些文字轉(zhuǎn)化為具體的y坐標值（即出現(xiàn)的高度） 具體代碼如下：
formatData(item = {}) {
item.position = this.getPosition(item.position);
if (!item.color) item.color = this.getColors();
return item;
},4、創(chuàng)建彈幕對象
格式化了彈幕對象的數(shù)據(jù)之后，我們需要利用這些數(shù)據(jù)轉(zhuǎn)換成真正可以在頁面上展示出來的dom對象，具體實現(xiàn)如下：
滾動動畫定義
我們彈幕可以從右邊出現(xiàn)滾動到左邊，也可以從左邊出現(xiàn)滾動到右邊，這里分別使用來個動畫來實現(xiàn)，具體代碼如下：
<style vars="{width}" lang="scss">
@keyframes moveLeft {
from {
left: 0px;
}
to {
left: var(--width);
}
}
@keyframes moveRight {
from {
right: 0px;
}
to {
right: var(--width);
}
}
</style>創(chuàng)建彈幕dom對象實例
每一個彈幕我們使用一個span來生成，具體代碼如下：
createBarrage(item) {
const content = this.content;
const span = document.createElement("span");
span.style.color = item.color;
span.innerHTML = item.text;
if (this.full) span.style.position = "fixed";
span.style.top = item.position + "px";
if (this.startFrom == "left") {
span.style.left = "0px";
span.style.animation = `moveLeft ${this.time}s linear`;
} else {
span.style.right = "0px";
span.style.animation = `moveRight ${this.time}s linear`;
}
if (this.mask) {
span.style.padding = "0.2em 0.5em";
span.style.backgroundColor = "#bbb2b2";
}
content.appendChild(span);
this.barrageNums++;
this.destroyBarrage(span);
},彈幕銷毀
彈幕滾動到屏幕外的時候我們需要將其銷毀
destroyBarrage(dom = null) {
if (!dom) return;
let content = this.content;
if (content.offsetLeft + content.offsetWidth < dom.offsetLeft) {
content.removeChild(dom);
this.barrageNums--;
} else {
setTimeout(() => {
this.destroyBarrage(dom);
}, 1000);
}
},彈幕循環(huán)
在彈幕全部生成并且最后生成的彈幕已經(jīng)走過1/3時間的時候生成下一波的彈幕
if (
index == this.showBarrageDate.length - 1 &&
this.repetition
) {
setTimeout(() => {
this.generateBarrage();
}, timeFlag * 1000 + this.time / 3);
}5、實時彈幕發(fā)送
我們可以這里輸入彈幕信息，然后發(fā)送彈幕，具體實現(xiàn)如下：
html
<div class="j-barrage-send-box">
<span
class="j-barrage-tools-box"
@click.stop="() => {}"
v-if="showToolsBox"
>
<div class="j-barrage-send-box-item">
<span>顏色：</span
><input v-model="sendObj.color" type="color" />
</div>
<div class="j-barrage-send-box-item">
<span>位置：</span>
<template v-for="(pos, index) in position">
<span :key="'pos-span-' + index">{{ pos }}</span>
<input
:key="'pos-input-' + index"
name="position"
type="radio"
:value="pos"
v-model="sendObj.position"
/>
</template>
</div>
</span>
<span class="j-barrage-send-box-item input-box" v-if="showBtn">
<span
class="j-barrage-send-box-item-tools"
@click.stop="showToolsBox = !showToolsBox"
>A</span
>
<input
class="j-barrage-send-box-item-input"
v-model="sendObj.text"
@focus="showToolsBox = false"
@keydown.enter="sendBarrage"
/>
<span class="j-barrage-send-box-item-btn" @click="sendBarrage"
>發(fā)送</span
>
</span>
</div>JavaScript
sendBarrage() {
const obj = this.formatData({ ...this.sendObj });
this.showBarrageDate.push(obj);
this.createBarrage(obj);
},源碼地址
代碼已經(jīng)開源，并且寫了相關(guān)的文檔對其進行了簡單介紹，具體如下：
組件文檔：
到此這篇關(guān)于vue封裝一個彈幕組件詳解的文章就介紹到這了,更多相關(guān)vue封裝組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了el-table 行合并的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文為大家介紹了VUE中內(nèi)置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once2019-02-02
這篇文章主要介紹了教你如何編寫Vue.js的單元測試的方法，介紹了簡單的單元測試，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue 使用插槽分發(fā)內(nèi)容操作示例【單個插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內(nèi)容操作,結(jié)合實例形式總結(jié)分析了vue.js使用單個插槽、具名插槽、作用域插槽相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue系列：通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過vue-router如何傳遞參數(shù)示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了validator自定義驗證及易錯點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02