npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

Readme

minivueBarrage(vue3)

License

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

关于我

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

weChat