vue封裝一個(gè)彈幕組件詳解
前言
現(xiàn)在很多地方都有使用到彈幕，最近在搗鼓自己的個(gè)人博客網(wǎng)站，也想著在里面加入一個(gè)彈幕模塊，所以在這里封裝了一個(gè)可復(fù)用的彈幕組件，目前已經(jīng)實(shí)現(xiàn)了基本的功能，可能還會(huì)有存在缺陷，后續(xù)會(huì)繼續(xù)優(yōu)化。這里給大家介紹分享一下實(shí)現(xiàn)的過(guò)程。
功能實(shí)現(xiàn)
1、獲取隨機(jī)顏色
顏色編碼是由6位16進(jìn)制數(shù)組成，我們可以隨機(jī)生成6位16進(jìn)制數(shù)。
隨機(jī)數(shù)生成
隨機(jī)生成[min,max]區(qū)間的數(shù)字
getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
},隨機(jī)顏色編碼生成
隨機(jī)生成6位16進(jìn)制數(shù)。
getColors() {
const arr = "0123456789abcdef";
let color = "#";
let n = 6;
while (n--) color += arr[this.getRandom(0, 15)];
return color;
},2、隨機(jī)生成彈幕出現(xiàn)的高度坐標(biāo)
這里我劃分了三塊區(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、格式化彈幕對(duì)象
定義的彈幕對(duì)象結(jié)構(gòu)如下：
{
text: "111",
color: "red",
position: "top" //top,center,bottom
}我們需要進(jìn)行以下處理：
顏色
這里的color允許為空，為空時(shí)會(huì)自動(dòng)生成隨機(jī)顏色
定位
彈幕對(duì)象傳入的position為top,center,bottom或者random，我們需要將這些文字轉(zhuǎn)化為具體的y坐標(biāo)值（即出現(xiàn)的高度） 具體代碼如下：
formatData(item = {}) {
item.position = this.getPosition(item.position);
if (!item.color) item.color = this.getColors();
return item;
},4、創(chuàng)建彈幕對(duì)象
格式化了彈幕對(duì)象的數(shù)據(jù)之后，我們需要利用這些數(shù)據(jù)轉(zhuǎn)換成真正可以在頁(yè)面上展示出來(lái)的dom對(duì)象，具體實(shí)現(xiàn)如下：
滾動(dòng)動(dòng)畫(huà)定義
我們彈幕可以從右邊出現(xiàn)滾動(dòng)到左邊，也可以從左邊出現(xiàn)滾動(dòng)到右邊，這里分別使用來(lái)個(gè)動(dòng)畫(huà)來(lái)實(shí)現(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對(duì)象實(shí)例
每一個(gè)彈幕我們使用一個(gè)span來(lái)生成，具體代碼如下：
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);
},彈幕銷毀
彈幕滾動(dòng)到屏幕外的時(shí)候我們需要將其銷毀
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)走過(guò)1/3時(shí)間的時(shí)候生成下一波的彈幕
if (
index == this.showBarrageDate.length - 1 &&
this.repetition
) {
setTimeout(() => {
this.generateBarrage();
}, timeFlag * 1000 + this.time / 3);
}5、實(shí)時(shí)彈幕發(fā)送
我們可以這里輸入彈幕信息，然后發(fā)送彈幕，具體實(shí)現(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)開(kāi)源，并且寫(xiě)了相關(guān)的文檔對(duì)其進(jìn)行了簡(jiǎn)單介紹，具體如下：
組件文檔：
到此這篇關(guān)于vue封裝一個(gè)彈幕組件詳解的文章就介紹到這了,更多相關(guān)vue封裝組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了el-table 行合并的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下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
這篇文章主要介紹了教你如何編寫(xiě)Vue.js的單元測(cè)試的方法，介紹了簡(jiǎn)單的單元測(cè)試，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue 使用插槽分發(fā)內(nèi)容操作示例【單個(gè)插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內(nèi)容操作,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用單個(gè)插槽、具名插槽、作用域插槽相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue系列：通過(guò)vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過(guò)vue-router如何傳遞參數(shù)示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
淺談validator自定義驗(yàn)證及易錯(cuò)點(diǎn)
這篇文章主要介紹了validator自定義驗(yàn)證及易錯(cuò)點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02