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

关于我

你可以添加我的微信，加入我们的群聊，一起收获更多的前端知识。