vue封装一个弹幕组件详解

更新时间：2022年08月02日 09:36:43 作者：JYeontu

这篇文章主要介绍了vue封装一个弹幕组件详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙可以参考一下

前言

现在很多地方都有使用到弹幕，最近在捣鼓自己的个人博客网站，也想着在里面加入一个弹幕模块，所以在这里封装了一个可复用的弹幕组件，目前已经实现了基本的功能，可能还会有存在缺陷，后续会继续优化。这里给大家介绍分享一下实现的过程。

功能实现

1、获取随机颜色

颜色编码是由6位16进制数组成，我们可以随机生成6位16进制数。

随机数生成

随机生成[min,max]区间的数字

getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
},

随机颜色编码生成

随机生成6位16进制数。

getColors() {
    const arr = "0123456789abcdef";
    let color = "#";
    let n = 6;
    while (n--) color += arr[this.getRandom(0, 15)];
    return color;
},

2、随机生成弹幕出现的高度坐标

这里我划分了三块区域，分别为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坐标值（即出现的高度） 具体代码如下：

formatData(item = {}) {
    item.position = this.getPosition(item.position);
    if (!item.color) item.color = this.getColors();
    return item;
},

4、创建弹幕对象

格式化了弹幕对象的数据之后，我们需要利用这些数据转换成真正可以在页面上展示出来的dom对象，具体实现如下：

滚动动画定义

我们弹幕可以从右边出现滚动到左边，也可以从左边出现滚动到右边，这里分别使用来个动画来实现，具体代码如下：

<style vars="{width}" lang="scss">
@keyframes moveLeft {
    from {
        left: 0px;
    }
    to {
        left: var(--width);
    }
}
@keyframes moveRight {
    from {
        right: 0px;
    }
    to {
        right: var(--width);
    }
}
</style>

创建弹幕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);
    }
},

弹幕循环

在弹幕全部生成并且最后生成的弹幕已经走过1/3时间的时候生成下一波的弹幕

if (
    index == this.showBarrageDate.length - 1 &&
    this.repetition
) {
    setTimeout(() => {
        this.generateBarrage();
    }, timeFlag * 1000 + this.time / 3);
}

5、实时弹幕发送

我们可以这里输入弹幕信息，然后发送弹幕，具体实现如下：

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"
            >发送</span
        >
    </span>
</div>

JavaScript

sendBarrage() {
    const obj = this.formatData({ ...this.sendObj });
    this.showBarrageDate.push(obj);
    this.createBarrage(obj);
},

源码地址

代码已经开源，并且写了相关的文档对其进行了简单介绍，具体如下：

组件文档：

jvuewheel

到此这篇关于vue封装一个弹幕组件详解的文章就介绍到这了,更多相关vue封装组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

el-table 行合并的实现示例
本文主要介绍了el-table 行合并的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
10分钟快速上手VueRouter4.x教程
Vue Router目前最新版本是4.X，本文主要主要介绍了10分钟快速上手VueRouter4.x教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue指令指令大全
本文为大家介绍了VUE中内置指令包括：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-once
2019-02-02
教你如何编写Vue.js的单元测试的方法
这篇文章主要介绍了教你如何编写Vue.js的单元测试的方法，介绍了简单的单元测试，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
Vue之Watcher源码解析（2）
这篇文章主要为大家详细介绍了Vue源码之Watcher的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
这篇文章主要介绍了vue 使用插槽分发内容操作,结合实例形式总结分析了vue.js使用单个插槽、具名插槽、作用域插槽相关操作技巧与注意事项,需要的朋友可以参考下
2020-03-03
vue中 this.$set的用法详解
这篇文章主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Vue系列：通过vue-router如何传递参数示例
本篇文章主要介绍了Vue系列：通过vue-router如何传递参数示例，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
vue基础之data存储数据及v-for循环用法示例
这篇文章主要介绍了vue基础之data存储数据及v-for循环用法,结合实例形式分析了vue.js使用data存储数据、读取数据及v-for遍历数据相关操作技巧,需要的朋友可以参考下
2019-03-03
浅谈validator自定义验证及易错点
这篇文章主要介绍了validator自定义验证及易错点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-02-02