minivuebarrage
v1.0.3
Published
minivuebarrage is a lightweight barrage component that supports rich features such as adjusting the opacity color of the barrage
Downloads
47
Maintainers
Readme
minivueBarrage(vue3)
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开发的一套弹幕插件,你可以通过注册该插件,完成弹幕滚动功能,希望它可以帮助到你。
你可以点击这里查阅 中文文档
Installation 安装
Vue2 安装
# npm Vue2
npm install [email protected]
or
# yarn Vue2
yarn add [email protected]
Vue3安装
# yarn Vue3
yarn add [email protected]
or
# npm Vue3
npm i [email protected]
registry
vue2
全局注册
//全局组件
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
}
}
Vue3
全局注册
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>
Usage
<template>
<div class="panel-wapper">
<miniVueBarrage
v-model="barrages"
:fullScreen="fullScreenSwitch"
:showBarrage="showBarrage"
:opacity="opacityValue"
:pausedFlag="barragePaused"
:createFrequencyTime="times"
:delay="10"
:color="'#000'"
:bgColor="'#ddd'"
ref="barrageRef"
batchDestroy
@click="clickHandle"
@change="changeHandle"
@complete="completeHandle"
@mouseenter="mouseenterHandle"
@mouseleave="mouseleaveHandle"
>
<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()
}
const clickHandle = (e: MouseEvent , item: object) => {
console.log('item' , e.target);
}
const completeHandle = () => {
console.log('弹幕运行完成');
}
const mouseenterHandle = (e: MouseEvent , item: object) => {
console.log('item' , e.target , item);
}
const mouseleaveHandle = (e: MouseEvent , item: object) => {
console.log('item' , e.target , item);
}
</script>
Configuration
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ------------------------------------------------------ | ---------------- | ------------ | ------- | | 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 |
Slots
| 插槽名称 | 说明 | | -------- | --------------------- | | icon | 用于弹幕 显示图标插槽 |
Events
| 事件名称 | 说明 | | | ---------- | ---------------------------------- | ----------------------------- | | change | 弹幕每次创建或者发生改变时触发 | (params : object) => {} | | complete | 弹幕所有数据运行完成触发 | () => {} | | click | 点击某个弹幕触发的事件 | (e , item: BarrageItem) => {} | | mouseenter | 鼠标移入某个弹幕的身上时触发该事件 | (e , item: BarrageItem) => {} | | mouseleave | 鼠标移出某个弹幕的身上时触发该事件 | (e , item: BarrageItem) => {} |
instance methods
instance dataTyps
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' } |
License
MIT
Keywords
minivuebarrage , barrage , 弹幕 vuebarrage vueBarrage , BARRAGE
关于我
你可以添加我的微信,加入我们的群聊,一起收获更多的前端知识。