vue3项目中数字滚动效果

       前言:

                目前大多数新的vue项目都采用了vue3去写, 在最近的项目中,需要展示数字滚动的效果,我就想到了之前用多的vue-count-to数字滚动插件,发现这个插件只使用于vue2项目,在vue3项目中并不试用。。。由于自己很懒,又不想再手搓一个,于是又找了一个试用于vue3的插件。

vue3-number-roll-plus                

1,安装

npm install vue3-number-roll-plus --save

2,使用

<template><vue-number-roll-plus:number="9999"background="transparent"></vue-number-roll-plus>
</template><script>
import VueNumberRollPlus from "vue3-number-roll-plus"
import "vue3-number-roll-plus/main.css"
export default {components: {VueNumberRollPlus}
}
</script>

3,属性

属性属性含义类型默认值
number传入的数字Number/String0
isSemicolon是否三位分隔Booleanfalse
speed滚动速度(s)Number1
background背景色String#0e68cc

4,事件

事件名事件参数
numberChange数字变化后触发number
done数字滚动结束之后触发number

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

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

相关文章

spring boot项目整合spring security权限认证

一、准备一个spring boot项目 1、引入基础依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.sp…

自定义类型讲解

&#x1f495;痛苦难道是白忍受的吗&#xff1f;&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;自定义类型讲解 一.结构体 定义&#xff1a; 数组&#xff1a;多组相同类型元素的集合 结构体&#xff1a;多组不同类型元素的集合-->管理多组不同类型数据…

计算机视觉实验:人脸识别系统设计

实验内容 设计计算机视觉目标识别系统&#xff0c;与实际应用有关&#xff08;建议&#xff1a;最终展示形式为带界面可运行的系统&#xff09;&#xff0c;以下内容选择其中一个做。 1. 人脸识别系统设计 (1) 人脸识别系统设计&#xff08;必做&#xff09;&#xff1a;根据…

tinkerCAD案例:24. Ruler - Measuring Lengths 标尺 -量勺

tinkerCAD案例&#xff1a;24. Ruler - Measuring Lengths 标尺 - 测量长度 Project Overview: 项目概况&#xff1a; A machine shop, where any idea can become a reality, can cost millions and million of dollars. Still, the most important tool in the shop is the…

vue-cli4升级到vue-cli5的踩坑记录

前言 最近对部分项目升级了vue-cli脚手架&#xff0c;记录一下 问题一&#xff1a; scss/less/css中无法引入public下的静态资源 问题描述 在样式文件中使用静态资源路径导致编译无法通过 错误信息如下&#xff1a; Module not found: Error: Cant resolve /img/login/lo…

小研究 - 主动式微服务细粒度弹性缩放算法研究(二)

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放&#xff0c;忽略了能够充分利用单台服务器资源的细粒度垂直缩放&#xff0c;从而导致资源浪费。为此&#xff0c;本文设计了主动式微服务细粒度弹性缩放算法…

Android 面试题 应用程序结构 十

&#x1f525; Intent 传递数据 &#x1f525; Activity、Service、BroadcastReceiver之间的通信载体 Intent 来传递数据。而ContentProvider则是共享文件。 Intent可传递的数据类型&#xff1a; a. 8种基本数据类型&#xff08;boolean byte char short int long float double…

如何配置一个永久固定的公网TCP地址来SSH远程树莓派?

文章目录 如何配置一个永久固定的公网TCP地址来SSH远程树莓派&#xff1f;前置条件命令行使用举例&#xff1a;修改cpolar配置文件 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 …

第1集丨Vue 江湖 —— Hello Vue

目录 一、简介1.1 参考网址1.2 下载 二、Hello Vue2.1 创建页面2.2 安装Live Server插件2.4 安装 vue-devtools2.5 预览效果 一、简介 Vue&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设…

app自动化测试之Appium问题分析及定位

使用 Appium 进行测试时&#xff0c;会产生大量日志&#xff0c;一旦运行过程中遇到报错&#xff0c;可以通过 Appium 服务端的日志以及客户端的日志分析排查问题。 Appium Server日志-开启服务 通过命令行的方式启动 Appium Server&#xff0c;下面来分析一下启动日志&#…

使用web-view实现网页端和uni-app端是数据传输

要实现这个功能 第一步&#xff1a;要在vue的public文件夹下面引入 <script type"text/javascript" src"https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> 第二步&#xff1a;建立一个新的空的uni-app项目…

DHorse v1.3.0 发布,基于k8s的发布平台

综述 DHorse是一个简单易用、以应用为中心的云原生DevOps系统&#xff0c;具有持续集成、持续部署、微服务治理等功能&#xff0c;无需安装依赖Docker、Maven、Node等环境即可发布Java、Vue、React应用&#xff0c;主要特点&#xff1a;部署简单、操作简洁、功能快速。 新增特…

什么是汽车软件的模糊测试?

汽车软件的模糊测试&#xff08;fuzz testing&#xff09;是一种在软件开发过程中用来发现潜在漏洞和缺陷的测试方法。它通过输入大量的随机、无效或异常数据来模拟真实环境中各种可能的异常情况&#xff0c;以测试软件的健壮性和稳定性。 1. 确定模糊测试的目标&#xff1a;确…

《罗刹海市》歌词

前篇 马骥是蒲松龄原著中的主人公&#xff0c;是一位“美丰姿&#xff0c;少倜傥”的美少年&#xff0c;误入距离中国东边两万六千里的罗刹国&#xff0c;那是一个以丑为美&#xff0c;颠倒黑白的国度&#xff0c;越丑的人官位越高&#xff0c;享受的荣华富贵越多。 文武百官…

Apache Doris 巨大飞跃:存算分离新架构

作者&#xff1a;马如悦 Apache Doris 创始人 历史上&#xff0c;数据分析需求的不断提升&#xff08;更大的数据规模、更快的处理速度、更低的使用成本&#xff09;和计算基础设施的不断进化&#xff08;从专用的高端硬件、到低成本的商用硬件、到云计算服务&#xff09;&…

JPEG有损图像压缩编码器(附源码)

概述 一个基本由自己实现的JPEG有损图像压缩编码器&#xff0c;基于JFIF&#xff08;JPEG文件交换格式&#xff09;标准&#xff1a; 色彩空间转换&#xff08;RGB to YUV&#xff09;色度抽样&#xff08;采样因子4:2:0&#xff09;MCU分块&#xff08;16x16的最小编码单元&…

Docker 镜像操作

title: “Docker 镜像操作” tags: - “Docker” toc: false indent: false original: true draft: false 更新记录 时间内容2020-06-12初稿2022-09-01文档整理 一、docker 老命令 由于docker的发展历史&#xff0c; docker关于操作image的指令有两种&#xff1a; 一种是下…

DailyRecord-230726

技术 OC&#xff1a;objc_setAssociatedObject&#xff0c;把一个对象绑定到另一个对象上&#xff0c;好用&#xff0c;结构简单 将NSString转换为正确的JSON格式(Converting NSString to proper JSON format)_电脑培训&#xff0c;用NSString格式写json 有变量时用stringWith…

前后端分离开发中的传参

1.post请求&#xff0c;后台代码使用RequestBody注解接收前端传过来的参数 PostMapping("/saveHosp") public Result SaveHosp(RequestBody HospitalSet hospitalSet){//此处省略中间代码......} 此时前端传过来的参数须为JSON格式&#xff0c;前端VUE传参数为&…

多模态第2篇:MMGCN代码配置

一、Windows环境 1.创建并激活虚拟环境 #创建虚拟环境命名为mmgcn&#xff0c;指定python版本为3.8 conda create -n mmgcn python3.8 #激活虚拟环境 conda activate mmgcn2.安装pytorch #torch2.0.0 cu118 pip install torch2.0.0cu118 torchvision0.15.1cu118 torchaudio…