vue3中使用弹幕组件vue-danmaku

news2024/11/15 20:47:52

在这里插入图片描述

1、最开始使用的是vue3-marquee,后面发现一直有一个bug无法解决,就是鼠标hover到第一个弹幕上字体就会变粗,已经提了issue给作者,但是目前还未答复,所以就换了方案。

地址如下:
https://github.com/megasanjay/vue3-marquee

2、后面就开始使用了,这个应该是国内开发者开发的:
vue-danmaku

3、使用感受:

因为我们的弹幕要求多行,使用vue-danmaku还是挺方便的,
可以通过channels来设置。
在这里插入图片描述
实例代码:

  <danmaku ref="danmakuRef" v-model:danmus="danmus" 
    :speeds="40"    useSlot loop :channels="2" style="height:900px; width:800px;">
    <template v-slot:dm="{ index, danmu }">
        <div @mouseenter="handleEnter"
        @mouseleave="handleLeave"
        @click='handleClick(danmu)'
        class="img_style">
        <span>{{ index }}{{ danmu.name }}{{ danmu.text }}</span>
        </div>
    </template>
  </danmaku>

import danmaku from 'vue3-danmaku'

若想实现循环播放可通过play-end 回调 加 play来实现,即所有弹幕播放完成(已滚出屏幕)时重新开启播放。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1892566.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Zoom视颊会议软件使用

GPT-3.5 (OpenAI) Zoom是一款极受欢迎的视频会议软件。使用Zoom可以方便地进行视频会议、远程授课、在线研讨会等活动。以下是Zoom的使用步骤&#xff1a; 1. 下载Zoom客户端 可以在Zoom官网上下载对应平台的Zoom客户端。下载并完成安装后&#xff0c;双击打开客户端。 2. 创建…

用Python制作动态钟表:实时显示时间的动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame绘制钟表函数主循环 完整代码 引言 动态钟表是一种直观且实用的UI元素&#xff0c;能够实时显示当前时间。在这篇博客中&#xff0c;我们将使用Python创建一个动态钟表&#xff0c;通过利用Pygame库来实…

动手学Avalonia:基于SemanticKernel与硅基流动构建AI聊天与翻译工具

Avalonia是什么&#xff1f; Avalonia是一个跨平台的UI框架&#xff0c;专为.NET开发打造&#xff0c;提供灵活的样式系统&#xff0c;支持Windows、macOS、Linux、iOS、Android及WebAssembly等多种平台。它已成熟并适合生产环境&#xff0c;被Schneider Electric、Unity、Jet…

高薪程序员必修课-Java中 ReentrantLock的公平锁和非公平锁底层实现原理

目录 前言 公平锁&#xff08;Fair Lock&#xff09; 原理 实现 示例代码 底层实现 非公平锁&#xff08;Non-Fair Lock&#xff09; 原理 实现 示例代码 底层实现 比较与选择 总结 ⭐️ 好书推荐 前言 在Java中&#xff0c;ReentrantLock 提供了公平锁和非公平锁…

详解 RisePro 信息窃密木马

RisePro 是一种窃密木马&#xff0c;以恶意软件即服务&#xff08;MaaS&#xff09;的模式在地下论坛出售。该恶意软件家族最早在 2022 年被发现&#xff0c;近期攻击行为快速增长。 RisePro 不依赖特定的感染媒介&#xff0c;可以通过多种方式植入失陷主机&#xff0c;通常使…

抖音本地生活服务商入驻流程须知指南!

近日&#xff0c;抖音发布关于新增《【到家外卖】内容服务商开放准入公告》的意见征集通知&#xff08;以下简称“通知”&#xff09;&#xff0c;并在其中公布了抖音外卖服务商入驻的一系列申请条件。在此背景下&#xff0c;许多想要成为抖音本地生活服务商的创业者在关注抖音…

java对象的访问定位的两种方式

句柄访问&#xff1a;reference中存储的稳定&#xff0c;对象实例位置改变&#xff0c;只需要改变句柄池中的对象实例指针 直接指针访问&#xff1a;HotSpot方式&#xff1a;效率高

【实验室优选】PP比色管 带刻度 聚丙烯试管 化学实验专用

PP比色管是一种实验室常用的容器&#xff0c;通常用于化学分析、比色实验、样品储存等。 以下是关于PP比色管的一些基本信息&#xff1a; 1. 材质&#xff1a; PP比色管由聚丙烯&#xff08;Polypropylene&#xff0c;简称PP&#xff09;材料制成&#xff0c;这种材料具有较高…

14-4 深入探究小型语言模型 (SLM)

大型语言模型 (LLM) 已经流行了一段时间。最近&#xff0c;小型语言模型 (SLM) 增强了我们处理和使用各种自然语言和编程语言的能力。但是&#xff0c;一些用户查询需要比在通用语言上训练的模型所能提供的更高的准确性和领域知识。此外&#xff0c;还需要定制小型语言模型&…

汇凯金业:数字货币对经济的影响有哪些

随着信息技术的飞速发展&#xff0c;数字货币作为一种新兴的货币形态&#xff0c;正逐步走进人们的视野&#xff0c;并对传统经济体系产生着深远影响。它不仅革新了交易方式&#xff0c;更在重塑金融格局、赋能经济发展等方面展现出巨大潜力。 一、交易效率的“加速器” 数字…

CentOS 7.9 快速更换 阿里云源教程

CentOS 7.9 更换源教程 总结 # 下载 wget yum -y install wget # 备份 yum 源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak # 下载阿里云的yum源到 /etc/yum.repos.d/ # 此处以 CentOS 7 为例&#xff0c;如果是其它版本或者系统的话&#…

适合职场小白的待办事项管理方法和工具

刚入职场那会儿&#xff0c;我每天都像只无头苍蝇&#xff0c;忙得团团转却效率低下。待办事项像潮水般涌来&#xff0c;会议、报告、客户跟进……每一项都像是悬在头顶的利剑&#xff0c;让我焦虑不堪。我深知&#xff0c;管理好待办事项是职场生存的必修课&#xff0c;但该如…

offer150-19:正则表达式匹配

问题描述&#xff1a;请实现用一个函数来匹配包含 “.” 和 “ * ”的正则表达式。模式中的字符.表示任意一个字符&#xff0c;而 ‘ * ’表示它前面的字符可以出现任意次(含0次&#xff09;。在本题中&#xff0c;匹配是指字符串的所有字符匹配整个模式。例如&#xff0c;字符…

nginx访问图片报403的问题

在安装好nginx后&#xff0c; 编辑/etc/nginx/sites-available/default加上了如下内容&#xff1a; # 图片文件的位置location /images/ {alias /home/lighthouse/images/;autoindex on; # 可选&#xff0c;允许目录列表access_log off; # 可选&#xff0c;禁用访问日志记录…

【人工智能】GPT-5的即将到来:从高中生进化到,,,博士生?

GPT-5的即将到来&#xff1a;从高中生进化到,博士生&#xff1f; 随着近月GPT-4o的出世&#xff0c;OpenAI也在进行一系列的采访和介绍接下来的展望和目标。 在6月22日的采访中&#xff0c;美国达特茅斯工程学院公布了OpenAI首席技术官米拉穆拉蒂的访谈内容。穆拉蒂确认&#…

LaTeX 编辑协作平台 Overleaf 安装和使用教程

在学术界和科技行业&#xff0c;LaTeX 已成为撰写高质量文档的标准工具。然而&#xff0c;传统的 LaTeX 使用体验常常伴随着以下挑战&#xff1a; 学习曲线陡峭环境配置复杂多人协作困难实时预览不便 当然&#xff0c;市面上不乏很多在线 LaTeX 编辑平台&#xff0c;但它们大…

uniapp跨域问题解决

找到menifest文件&#xff0c;在文件的最后添加如下代码&#xff1a; // h5 解决跨域问题"h5":{"devServer": {"proxy": {"/adminapi": {"target": "https://www.demo.com", // 目标访问网址"changeOrigin…

哈喽GPT-4o,对GPT-4o 论文速写的思考与探索

作为一款强大的语言模型&#xff0c;ChatGPT 在论文写作上具备显著优势。它能够辅助学者或研究人员自动创建论文框架、摘要、文献综述及论文段落&#xff08;如引言、方法、结果、结论等&#xff09;。此外&#xff0c;ChatGPT 还能优化论文结构、润色、降低内容重复率&#xf…

SCI一区级 | Matlab实现BO-Transformer-BiLSTM时间序列预测

SCI一区级 | Matlab实现BO-Transformer-BiLSTM时间序列预测 目录 SCI一区级 | Matlab实现BO-Transformer-BiLSTM时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.【SCI一区级】Matlab实现BO-Transformer-BiLSTM时间序列预测&#xff0c;贝叶斯优化Transfor…

【Sklearn-驯化】轻松学会机器学习中的bagging基础模型随机森林的使用技巧

【Sklearn-驯化】轻松学会机器学习中的bagging基础模型随机森林的使用技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容…