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)畫定義
我們彈幕可以從右邊出現(xiàn)滾動(dòng)到左邊，也可以從左邊出現(xiàn)滾動(dòng)到右邊，這里分別使用來(lái)個(gè)動(dòng)畫來(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)開源，并且寫了相關(guān)的文檔對(duì)其進(jìn)行了簡(jiǎn)單介紹，具體如下：
組件文檔：
到此這篇關(guān)于vue封裝一個(gè)彈幕組件詳解的文章就介紹到這了,更多相關(guān)vue封裝組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱效果
v-model 可以實(shí)現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時(shí)允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11
Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。2017-02-02
vue2.0里，不再有自帶的過(guò)濾器，需要自己定義過(guò)濾器。下面通過(guò)實(shí)例代碼給大家介紹vue2中filter()的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-07-07
最近用 Vue 做移動(dòng)端頁(yè)面遇到一個(gè)問(wèn)題,需要記住滾動(dòng)條的位置,所以下面這篇文章主要給大家介紹了關(guān)于vue中記錄滾動(dòng)條位置的兩種方法,文中給出了詳細(xì)的實(shí)例,需要的朋友可以參考下2023-01-01
ant design vue中日期選擇框混合時(shí)間選擇器的用法說(shuō)明
這篇文章主要介紹了ant design vue中日期選擇框混合時(shí)間選擇器的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能
這篇文章主要介紹了基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能,文中通過(guò)代碼示例給大家講解的非常纖細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
今天小編就為大家分享一篇解決vue同一slot在組件中渲染多次的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03