minivuebarrage v0.3.5

minivueBarrage

Version description(版本说明)

npm版本

8.5.1 node 版本

node": ">=6.11.5"

中文文档

如何使用 ？ （How to use it?）

vue2

npm i minivuebarrage 

或

yarn add minivuebarrage

Description（描述）

minivueBarrage is a barrage component developed with the vue framework. It provides barrage resetting, opening, closing and pausing full screen, customizing ICONS, and defining user-published barrage styles, speed colors, and more

Usage（使用）

This plugin can help you quickly create a pop-up view container, you can specify operations on it, such as pause, reset, open, close and so on, let's see how to use it

main.js

//全局组件
import miniVueBarrage from 'minivuebarrage'
import 'minivuebarrage/lib/mini-vue-barrage.css'
import Vue from 'vue'

Vue.use(miniVueBarrage)

or

// 局部组件
import { miniVueBarrage } from "minivuebarrage";
import "minivuebarrage/lib/mini-vue-barrage.css";

components

当前弹幕的类名 可根据类名绑定样式<template>
  <div class="Home">
    <miniVueBarrage class="barrages-ctn" ref='barrage' fullScreen :definStyle='myStyle' :barrages="barrages" />
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
        barrages: [{
            content:"Michelle Young", // 弹幕内容
            id:"110000200606013327", // 弹幕id
            type:"common", // 弹幕类型
            url:"", // 决定你跳转的页面 
            delay ： 5, // 决定你弹幕的运行速度 单位为 s
            className ： ‘’, // 当前弹幕的类名 可根据类名绑定样式
            Icon : '', // 支持 http 链接 or base64字符串 弹幕的icon 默认为 VueIcon
        }]
    };
  },
    computed: {
        myStyle(){
            return { border : '1px solid red' }
        }
    }  
};
</script>

详解:

className ： 如果你需要给特殊类型的弹幕进行样式定制，那你只需要给当前这条弹幕传入类名，我们会自动绑定该类，你可以在组件外部尽情的更改样式，也许它会对你有帮助（If you need to style a particular type of screen, just pass in the class name for the current screen, we will automatically bind the class, you can change the style outside the component as much as you like, maybe it will help you）

Icon ： 如果你需要给弹幕绑定Icon小图标，那你可以在当前弹幕对象中添加该属性，我会帮助你完成渲染，也许它会对你有帮助（If you need to attach a small Icon to a bullet screen, then you can add this property to the current bullet screen object, I will help you finish rendering, maybe it will help you）

高级用法

我们对该组件实例本身暴露了以下几个方法（We exposed the following methods to the component instance itself.）。

add

  add(e) {
      // this.value 代表输入的弹幕值
      if (!this.value.trim()) return;
      this.$refs.barrage.add({
        content: this.value
      });
      this.value = "";
    },

changeColor

 changeColor() {
      // this.color 代表选择的颜色字符串 比如:'#000000'
      this.$refs.barrage.changeColor(this.color);
 }

close

 close() {
      this.$refs.barrage.close();
 }	,

参数列表（Parameter list）