之前逛论坛发现大佬做的一个弹幕组件挺有意思的，然后自己也想来捣鼓捣鼓，索性用 vue 做了一个弹幕组件，小人不才，做的一效果般般，希望些许可以帮助到大家把。
https://github.com/SXX19950910/vue-barrage-board
话不多说，README 伺候！
vue-barrage-board
简单好用的弹幕板
使用方式
# install
npm i vue-barrage-board -S
api
| name | describe | params |
|---|---|---|
| insert | 插入一条弹幕进弹幕板 | message,color,size,loop,speed |
| handleClearScreen | 清屏 | - |
| handleChangeState | 切换弹幕的状态（行进，暂停） | true/false |
| handleToggleLoop | 切换循环状态 | true/false |
props
| name | describe | params |
|---|---|---|
| showToolsBar | 是否显示操作栏 | true/false |
| theme | 主题 | light/dark |
example
<template>
<barrage-board showToolsBar theme="dark" ref="barrage-board" />
</template>
<script>
import barrageBoard from 'vue-barrage-board'
export default {
components: barrageBoard,
methods: {
handleInsertBubble() {
const bubble = {
message: '弹幕内容', // 消息文本
size: 20, // 字体大小
color: '#000', // 字体颜色
speed: 'linear', // ease ease-in ease-out ease-in-out
loop: true // 是否循环
}
this.$refs['barrage-board'].insert(bubble)
}
}
}
</script>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于