Vue3 走马灯Vue3Marquee组件库的使用 文字走马灯 公告栏

news2024/12/28 21:54:02

介绍

Vue3Marquee 是一个用于在 Vue 3 项目中创建跑马灯(Marquee)效果的组件库,常见于网站的公告,如文字太长可以考虑使用该组件让文字进行滚动, 当然不止是文字 元素也可以
在这里插入图片描述

项目地址

https://gitcode.com/gh_mirrors/vu/vue3-marquee/overview?utm_source=artical_gitcode&index=top&type=card&webUrl&isLogin=1

安装

npm install vue3-marquee@latest --save

全局注册

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
createApp(App).use(Vue3Marquee).mount('#app')

局部注册

import { Vue3Marquee } from 'vue3-marquee'
  <Vue3Marquee class="tips-box">
  公告:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 </Vue3Marquee>

配置项

direction ‘normal’ 或 ‘reverse’ 字符串 “normal” 内容移动的方向
duration 数字 20 动画内容移动容器宽度所需的时间(以秒为单位)
delay 数字 0 动画开始前的延迟时间(以秒为单位)
loop 数字 0 动画应运行的次数(0 表示无限循环)
gradient 布尔值 false 是否显示渐变覆盖层
gradientColor 三个 RGB 值的数组 [255, 255, 255] 渐变颜色的 RGB 颜色
gradientLength 字符串 200px 渐变覆盖层占据容器边缘的长度部分
pause 布尔值 false 反应式属性,暂停滚动动画
pauseOnHover 布尔值 false 是否在悬停时暂停滚动动画
pauseOnClick 布尔值 false 是否在右键点击时暂停滚动动画
clone 布尔值 false 如果希望动画中没有空隙,则复制内容
vertical 布尔值 false 是否使滚动变为垂直方向
animateOnOverflowOnly 布尔值 false 当内容溢出容器时是否启动动画
在这里插入图片描述

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

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

相关文章

信息竞赛2024年第三次csp-j模拟测试赛后总结

目录 一.第一题&#xff1a;孤独的数列 (lonely) 二.第二题&#xff1a;五颜六色 (color) 三.第三题&#xff1a;获取字符串 (obtain) 首先自我反思&#xff0c;因为打错了freopen导致爆零&#xff0c;这是重大的失误&#xff0c;以后绝对不能再犯。 一.第一题&#xff1a;…

【前端】VUE 在线运行 模拟器 通过字符串动态渲染页面 可以灵活使用

【前端】VUE2 在线运行 模拟器 通过字符串动态渲染页面 可以灵活使用 <template><div><!-- 这里是动态组件--><component :is"component"></component><!-- 这里是动态组件--><br /><br /><br />可…

【源码+文档+调试讲解】学院网站

摘 要 使用旧方法对冀中工程技师学院网站的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在冀中工程技师学院网站的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次…

序列建模之循环和递归网络 - 长短期记忆和其他门控RNN篇

序言 在序列建模的广阔领域中&#xff0c;循环神经网络&#xff08; RNN \text{RNN} RNN&#xff09;以其独特的能力在处理可变长度序列数据上展现出了巨大的潜力。然而&#xff0c;传统的 RNN \text{RNN} RNN在处理长期依赖问题时&#xff0c;往往面临着梯度消失或爆炸的困境…

xss靶场 pwnfunction WW3

目录 代码 代码分析 payload构造 结果 代码 <div><h4>Meme Code</h4><textarea class"form-control" id"meme-code" rows"4"></textarea><div id"notify"></div> </div><scri…

UIAbility组件间的交互

一、Want 是UIAbility组件间交互载体。 Want启动UIAbility组件的两种方式&#xff1a; 1、显示Want启动 启动某个明确UIAbility组件时使用&#xff1b;需要在Want参数中设置启动的应用包名和UIAbility组件名。 2、隐式Want启动 需要使用某个应用的能力&#xff0c;不关心提供能…

在VBA中调用Adobe Acrobat或Reader的命令行工具,实现PDF自动打印 (‾◡◝)

在VBA&#xff08;Visual Basic for Applications&#xff09;中自动打印PDF文件通常不直接支持&#xff0c;因为VBA本身是针对Microsoft Office应用程序&#xff08;如Excel、Word和PowerPoint等&#xff09;的编程语言&#xff0c;并不直接处理PDF文件。但是&#xff0c;你可…

【JAVA多线程】CompletableFuture原理剖析

前文讲解了completablefuture的使用&#xff0c;本文将剖析其核心原理&#xff0c;前文连接&#xff1a; 【JAVA多线程】Future&#xff0c;专为异步编程而生_java future异步编程-CSDN博客 目录 1.任务组成任务链 2.默认使用ForkjoinPool作为线程池 3.任务是被串行执行的…

人工智能在Facebook的角色:创新与挑战并存

人工智能&#xff08;AI&#xff09;已经成为推动科技进步的重要力量&#xff0c;而在社交媒体领域&#xff0c;Facebook则是将AI技术广泛应用的先锋。Facebook通过AI来改善用户体验、提高内容质量以及优化广告投放&#xff0c;极大地提升了平台的功能与价值。然而&#xff0c;…

近年国际重大网络安全事件深度剖析:安全之路任重道远

引言 在当今数字化时代&#xff0c;网络安全已成为全球关注的焦点。随着信息技术的飞速发展&#xff0c;网络攻击的手段和规模也在不断升级&#xff0c;给个人、企业和国家带来了巨大的威胁。本文将盘点近年来国际上发生的重大网络安全事件&#xff0c;分析其影响和教训&#…

GPT-4o微调功能现已上线

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

图的应用

一、最小生成树 1&#xff09;Prim算法&#xff08;加点&#xff09; 2&#xff09;Kruskal算法&#xff08;加边&#xff09; 二、最短路径 1&#xff09;Dijkstra算法 2&#xff09;Floyd算法 三、拓扑排序 1&#xff09;AOV 拓扑序列不唯一 2)AOE&#xff08;关键路径&#…

实现Bezier样条曲线

1.给出n1 个控制点pk(xk,yk,zk),这里k可取值0-n,多项式函数公式如下 获取的单个点的代码 void zmBezier::getPoint(float u, double p[3]) {int n m_count - 1;double x 0, y 0, z 0;for(int k 0; k < n; k){x m_ctrlPoints[k][0] * BEZ_k_n(n, k, u);y m_ctrlPoin…

Trades和Centertrack在windows上配置

直接说结论好了,小虎在windows配了一个星期失败了,结果是双系统在linux下配置成功。 成功环境 Successful systems info: CUDA 11.4 CUDA driver 470.63.01 python 3.6.13 GCC 7.5.0 pytroch 1.9.0 compilation tools, release 11.4, V11.4.48成功记录

关于AR在医疗领域创新应用

AR技术在医疗领域创新应用&#xff0c;旨在展示AR技术如何为医疗行业带来革命性的变化&#xff0c;我们可以从以下几个方面入手&#xff1a; 一、引言 随着科技的飞速发展&#xff0c;增强现实&#xff08;AR&#xff09;技术正逐步渗透到医疗领域的各个环节&#xff0c;为患…

云手机在亚马逊店铺运营中能发挥什么作用

亚马逊作为全球领先的电商平台&#xff0c;汇聚了庞大的用户群体和交易规模&#xff0c;如何有效吸引流量成为亚马逊店铺经营者面临的难题。而云手机作为一种前沿的技术工具&#xff0c;为亚马逊店铺引流带来了全新的解决方案。本文将深入探讨云手机在亚马逊店铺引流中的关键作…

JVM类加载机制—JVM类加载过程

一、概述 代码编译后&#xff0c;就会生成JVM&#xff08;Java虚拟机&#xff09;能够识别的二进制字节流文件&#xff08;*.class&#xff09;。而JVM把Class文件中的类描述数据从文件加载到内存&#xff0c;并对数据进行校验、转换解析、初始化&#xff0c;使这些数据最终成…

数据结构--图(笔记)

文章目录 1. 概念2. 分类无向图有向图循环图连通图 3. 应用4. 操作(CRUD)5. 图常见的数据结构邻接表邻接矩阵关联矩阵关联矩阵与邻接矩阵 6. 内容出处 1. 概念 ① 图&#xff1a;在计算机科学中&#xff0c;图&#xff08;英语&#xff1a;graph&#xff09;是一种抽象数据类型…

36. 有效的数独【 力扣(LeetCode) 】

一、题目描述 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图…

2-72 基于matlab的平稳小波变换进行多聚焦图像融合

基于matlab的平稳小波变换进行多聚焦图像融合&#xff0c;获得一副清晰的图像&#xff0c;带有一副示例图像&#xff0c;实验效果好。SWT级平稳小波变换&#xff0c;是一种多尺度、多方向、时频局部的图像稀疏表示方法&#xff0c;广泛运行图像处理领域&#xff0c;具有平移不变…