vue封裝一個彈幕組件詳解
更新時間：2022年08月02日 09:36:43 作者：JYeontu???????
這篇文章主要介紹了vue封裝一個彈幕組件詳解，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙可以參考一下
前言
現(xiàn)在很多地方都有使用到彈幕，最近在搗鼓自己的個人博客網站，也想著在里面加入一個彈幕模塊，所以在這里封裝了一個可復用的彈幕組件，目前已經實現(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、格式化彈幕對象
定義的彈幕對象結構如下：
{
text: "111",
color: "red",
position: "top" //top,center,bottom
}我們需要進行以下處理：
顏色
這里的color允許為空，為空時會自動生成隨機顏色
定位
彈幕對象傳入的position為top,center,bottom或者random，我們需要將這些文字轉化為具體的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ù)轉換成真正可以在頁面上展示出來的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)
在彈幕全部生成并且最后生成的彈幕已經走過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);
},源碼地址
代碼已經開源，并且寫了相關的文檔對其進行了簡單介紹，具體如下：
組件文檔：
到此這篇關于vue封裝一個彈幕組件詳解的文章就介紹到這了,更多相關vue封裝組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue 使用v-model實現(xiàn)控制子組件顯隱效果
v-model 可以實現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11
Vue-Router實現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實現(xiàn)頁面正在加載特效方法示例，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實例代碼給大家介紹vue2中filter()的相關知識，感興趣的朋友一起看看吧2017-07-07
最近用 Vue 做移動端頁面遇到一個問題,需要記住滾動條的位置,所以下面這篇文章主要給大家介紹了關于vue中記錄滾動條位置的兩種方法,文中給出了詳細的實例,需要的朋友可以參考下2023-01-01
ant design vue中日期選擇框混合時間選擇器的用法說明
這篇文章主要介紹了ant design vue中日期選擇框混合時間選擇器的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
基于Vue3+TypeScript實現(xiàn)鼠標框選功能
這篇文章主要介紹了基于Vue3+TypeScript實現(xiàn)鼠標框選功能,文中通過代碼示例給大家講解的非常纖細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問題,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-08-08
今天小編就為大家分享一篇解決vue同一slot在組件中渲染多次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
Vue使用ElemenUI對table的指定列進行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對table的指定列進行合算的方法,本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03