This library is based on a set of barrage plug-ins developed by Vue3. You can complete the barrage scrolling function by registering this plug-in. I hope it can help you.
此库基于Vue开发的一套弹幕插件，你可以通过注册该插件，完成弹幕滚动功能,希望它可以帮助到你。
你可以点击这里查阅 中文文档
# npm Vue2
npm install [email protected]
or
# yarn Vue2
yarn add [email protected]# yarn Vue3
yarn add [email protected]
or
# npm Vue3
npm i [email protected]
全局注册
//全局组件
import miniVueBarrage from 'minivuebarrage'
import 'minivuebarrage/lib/mini-vue-barrage.css'
import Vue from 'vue'
Vue.use(miniVueBarrage)局部注册
// 局部组件
import { miniVueBarrage } from "minivuebarrage";
import "minivuebarrage/lib/mini-vue-barrage.css";
export default {
components:{
miniVueBarrage
}
}全局注册
import miniVueBarrage from 'minivuebarrage';
import 'minivuebarrage/lib/index.css';
const app = createApp(App)
app.use(miniVueBarrage)局部注册
<template>
<miniVueBarrage v-model="barrages" fullScreen/>
</template>
<script lang="ts" setup>
import { miniVueBarrage } from 'minivuebarrage';
import 'minivuebarrage/lib/index.css';
const barrages = ref([])
</script><template>
<div class="panel-wapper">
<miniVueBarrage v-model="barrages"
:fullScreen="fullScreenSwitch"
:showBarrage="showBarrage"
:opacity="opacityValue"
:pausedFlag="barragePaused"
:createFrequencyTime="times"
:color="'#000'"
:bgColor="'#ddd'"
ref="barrageRef"
@change="changeHandle">
<template #icon>
<div class="icon"></div>
</template>
</miniVueBarrage>
<div/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { barrageDatas } from '../../../../mock';
import miniVueBarrage from '../index.vue';
const barrages = [...barrageDatas]
const opacityValue = ref(100)
const barrageRef= ref<InstanceType<typeof miniVueBarrage> >()
const barrageHeightValue = ref(35)
const fullScreenSwitch = ref(true)
const showBarrage = ref(true)
const barragePaused = ref(false)
const barrageContent = ref('')
const curRenderCount = ref(0)
const times = ref(1)
export interface BarrageItem {
id?: number, //弹幕id
delay?: number, // 当前弹幕运行一屏的时间
iconUrl?: string, // 弹幕需要图标的 url
content: string, // 弹幕文本内容
color?: string, // 当前弹幕的文字颜色
bgColor?: string // 当前弹幕的背景颜色
type?: barrrageTypeGroup // 弹幕的类型 如果为user 则 添加 user的样式
}
// 添加弹幕
const addHandle = () => {
if(!barrageContent.value){
return
}
const item:BarrageItem = {
content: barrageContent.value,
id: 1,
type: 'user'
}
barrageRef.value?.create(item)
}
// 重新开始 渲染一屏弹幕
const startHandle = () => {
barrageRef.value?.start()
}
// 更新当前渲染的弹幕条数
const changeHandle = (params: any) => {
curRenderCount.value = params.renderCount
}
// 重置弹幕
const resetHandle = () => {
barrageRef.value?.reset()
}
// 清除弹幕
const clearHandle = () => {
barrageRef.value?.clear()
}
</script>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| modelValue | 弹幕数组 | Array | -- | [] |
| pausedFlag | 是否暂停弹幕 | Boolean | -- | false |
| startIcon | 图标是否从 开始位置显示 ，反之 末尾显示 | Boolean | -- | true |
| fullScreen | 是否需要全屏弹幕 | Boolean | -- | false |
| iconUrlInShow | iconUrl 存在时 是否需要显示 图标 | Boolean | -- | true |
| delay | 弹幕运行一屏的秒数 | Number | -- | 12 |
| createFrequencyTime | 创建弹幕频率的秒数 | Number | -- | 1 |
| createNum | 一次定时器触发创建几条 | Number | -- | 1 |
| opacity | 弹幕的透明度 | Number | String | -- | 1 |
| showBarrage | 是否显示弹幕 | Boolean | -- | true |
| baseLineHeight | 弹幕的基本行高 | Number | -- | 10 |
| color | 弹幕的文字颜色 | String | -- | #000 |
| heigth | 弹幕高度 | Number | String | -- | 35px |
| bgColor | 弹幕的背景颜色 | String | #xxx | rgba | #fec821 |
| batchDestroy | 是否需要批量删除弹幕，一次性销毁，提高性能（可选选项） | Boolean | 50 | false |
| 插槽名称 | 说明 |
|---|---|
| icon | 用于弹幕 显示图标插槽 |
| 事件名称 | 说明 | |
|---|---|---|
| change | 弹幕每次创建或者发生改变时触发 | (params : object) => {} |
| complete | 弹幕所有数据运行完成触发 | () => {} |
export type barrrageTypeGroup = 'default' | 'user'
export interface BarrageItem {
id?: number, //弹幕id
delay?: number, // 当前弹幕运行一屏的时间
iconUrl?: string, // 弹幕需要图标的 url
content: string, // 弹幕文本内容
color?: string, // 当前弹幕的文字颜色
bgColor?: string // 当前弹幕的背景颜色
type?: barrrageTypeGroup // 弹幕的类型 如果为user 则 添加 user的样式
}| 方法名称 | 说明 | 参数 |
|---|---|---|
| create | 创建一条弹幕 | BarrageItem |
| reset | 重置弹幕 | -- |
| clear | 清屏，将当前屏幕上的弹幕全部清除 | -- |
| close | 关闭弹幕 | -- |
| start | 重新运行一屏弹幕 | -- |
| changeColor | 改变弹幕的颜色 | { color: '#fff' } |
MIT
minivuebarrage , barrage , 弹幕 vuebarrage vueBarrage , BARRAGE
你可以添加我的微信，加入我们的群聊，一起收获更多的前端知识。