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封装组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Vue.js中使用Mixins的方法
本篇文章主要介绍了在Vue.js中使用Mixins的方法，Vue的Mixins是非常实用的编程方式，可以使代码变得容易理解，有兴趣的一起来了解一下
2017-09-09
记VUE3+TS获取组件类型的方法踩坑及解决
这篇文章主要介绍了VUE3+TS获取组件类型的方法踩坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue里的axios如何获取本地json数据
这篇文章主要介绍了vue里的axios如何获取本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
实例详解vue中的代理proxy
这篇文章主要介绍了vue中的代理proxy，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
VUE中filters过滤器的两种用法实例
vue中过滤器的作用可被用于一些常见的文本格式化,也就是修饰文本,但是文本内容不会改变,下面这篇文章主要给大家介绍了关于VUE中filters过滤器的两种用法,需要的朋友可以参考下
2022-04-04
解决vue报错'超出最大堆栈大小'问题
这篇文章主要介绍了解决vue报错'超出最大堆栈大小'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue遍历中存在el-form之踩坑记录
这篇文章主要介绍了vue遍历中存在el-form之踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue进阶之利用transition标签实现页面跳转动画
这篇文章主要为大家详细介绍了Vue如何利用transition标签实现页面跳转动画，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起一下
2023-08-08
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
这篇文章主要介绍了用vue官方提供的模板vue-cli搭建一个helloWorld案例,需要的朋友可以参考下
2018-01-01
3分钟迅速学会Vue中methods方法使用技巧
最近在学习Vue,感觉methods还是有必有总结一下的,下面这篇文章主要给大家介绍了关于3分钟迅速学会Vue中methods方法使用技巧的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02