minivuebarrage v1.0.3

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 minivuebarrage@0.3.5

or
# yarn Vue2
yarn add minivuebarrage@0.3.5

Vue3安装

# yarn Vue3
yarn add minivuebarrage@1.0.1

or
# npm Vue3
npm i minivuebarrage@1.0.1

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

Slots

Events

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的样式
}

License

MIT

Keywords

minivuebarrage , barrage , 弹幕 vuebarrage vueBarrage , BARRAGE

关于我

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