CountUp.js 实现数字增长动画 Vue

news2024/12/29 9:31:41

效果:

在这里插入图片描述

官网介绍

1. 安装

npm install --save countup.js

2. 基本使用

// template
<span ref="number1Ref"></span>

// script
const number1Ref = ref<HTMLElement>()
onMounted(() => {
  new CountUp(number1Ref.value!, 9999999).start()
})

3. 参数

new CountUp(参数一, 参数二, option)
// 源码:CountUp类的构造函数,前两个参数必传,第三个参数为可选
constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
  • 参数一: 数字所在容器
  • 参数二: 数字的最终值
  • option:更多配置项(可选)
// 括号内为默认值
interface CountUpOptions {
  startVal?: number; // 开始数字 (0)
  decimalPlaces?: number; // 小数位数 (0)
  duration?: number; // 动画时间:秒 (2)
  useGrouping?: boolean; // ,的位置。示例: 1,000 vs 1000 (true)
  useIndianSeparators?: boolean; // ,的位置。示例: 1,00,000 vs 100,000 (false)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // 分隔符 (',')
  decimal?: string; // 小数点 ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // 格式化为字符串
  prefix?: string; // 在结果前面添加字符
  suffix?: string; // 在结果后面添加字符
  numerals?: string[]; // 数字替换。numeral glyph substitution
  enableScrollSpy?: boolean; // 当视图可见时开始动画
  scrollSpyDelay?: number; // 视图可见后,延迟多久(单位:ms)开始动画
  scrollSpyOnce?: boolean; // 只运行一次
  onCompleteCallback?: () => any; // 动画完成后的回调函数
  onStartCallback?: () => any; // 动画开始时的回调函数
  plugin?: CountUpPlugin; // 插入CountUp动画
}

4. 示例

const option = {
  duration: 5,	// 动画持续时间5秒
  prefix: '¥'	// 在结果加前缀字符 ¥
}
onMounted(() => {
  new CountUp(number1Ref.value!, 9999999, option).start()
})

在这里插入图片描述

参考文章:CountUp.js( 轻量级数字动画插件 )原文链接

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

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

相关文章

C语言 | Leetcode C语言题解之第477题汉明距离总和

题目&#xff1a; 题解&#xff1a; int totalHammingDistance(int* nums, int numsSize) {int ans 0;for (int i 0; i < 30; i) {int c 0;for (int j 0; j < numsSize; j) {c (nums[j] >> i) & 1;}ans c * (numsSize - c);}return ans; }

超GPT3.5性能,无限长文本,超强RAG三件套,MiniCPM3-4B模型分享

MiniCPM3-4B是由面壁智能与清华大学自然语言处理实验室合作开发的一款高性能端侧AI模型&#xff0c;它是MiniCPM系列的第三代产品&#xff0c;具有4亿参数量。 MiniCPM3-4B模型在性能上超过了Phi-3.5-mini-Instruct和GPT-3.5-Turbo-0125&#xff0c;并且与多款70亿至90亿参数的…

元组与列表嵌套用法

1.可以对列表中的元素修改&#xff0c;不能对元组中的元素修改&#xff1b;当元组与列表嵌套时遵循上述原则. 下图为元组与列表的嵌套案例&#xff08;学生信息的完善&#xff09;&#xff1a;

QQ快捷键冲突解决方法

注意&#xff1a;快捷键被占用&#xff0c;更改快捷键后使用不了&#xff0c;是因为有其他系统快捷键被占用&#xff0c;多尝试几个就可以了

计算机是如何输入存储输出汉字、图片、音频、视频的

计算机是如何输入存储输出汉字、图片、音频、视频的 为了便于理解&#xff0c;先了解一下计算机的组成。 冯诺依曼计算机的五大组成部分。分别是运算器、控制器、存储器、输入设备和输出设备。参见下图&#xff1a; 一、运算器 运算器又称“算术逻辑单元”&#xff0c;是计算…

Golang | Leetcode Golang题解之第477题汉明距离总和

题目&#xff1a; 题解&#xff1a; func totalHammingDistance(nums []int) (ans int) {n : len(nums)for i : 0; i < 30; i {c : 0for _, val : range nums {c val >> i & 1}ans c * (n - c)}return }

SQLI LABS | SQLI LABS 靶场初识

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;SQLI LABS 靶场简介 SQLi-Labs 靶场是一个专门用于学习和测试 SQL 注入漏洞的开源靶场&#xff0c;该靶场提供了多个具有不同漏洞类型和难度级别的 Web 应用程序的环境。这些应用…

C++ | Leetcode C++题解之第477题汉明距离总和

题目&#xff1a; 题解&#xff1a; class Solution { public:int totalHammingDistance(vector<int> &nums) {int ans 0, n nums.size();for (int i 0; i < 30; i) {int c 0;for (int val : nums) {c (val >> i) & 1;}ans c * (n - c);}return …

Telegram——Bot 机器人/小程序入门指南

一、Bot 介绍 在 TG 中,机器人可以用于接收和发送消息、管理群组(在有权限的情况下可以封禁用户、删除消息、置顶消息等)、通过API进行编程操作、使用 Inline 查询功能在不同的聊天室中提供查询服务、创建自定义键盘按钮、发出账单并收款、接入小程序游戏等。 然而,Bot 默…

VMware免安装直接使用Win7成品虚拟机

VMware17 pro免安装直接使用Win7成品虚拟机 下载文件 下载VMWare与win7成品虚拟机&#xff08;PS&#xff1a;里面有Win10 和Win11&#xff0c;使用方法都是一样的&#xff09; ⏬下载链接⏬ 下载链接 使用虚拟机打开成品虚拟机

stable diffusion系列(1)------概述

本文是对李宏毅老师的课程的总结&#xff0c;B站链接如下&#xff1a; stable diffusion(1)概述 讲最经典的DDPM。 1. DDPM图像生成是一个多个step的去噪过程 DDPM是一个从噪声图像中通过不断去噪&#xff08;经过很多个step&#xff09;&#xff0c;生成图像的过程。 “雕像…

java面向对象编程--高级(二)

目录 一、内部类 1.1 成员内部类 1.1.1 静态和非静态 1.1.2 调用外部类的结构 1.2 局部内部类 1.2.1 非匿名和匿名 1.2.2 比较 1.2.3 练习 二、枚举类 2.1 枚举类讲解 2.2 代码实现 三、包装类 3.1 包装类与基本数据类型 3.2 练习 3.3 补充 四、自动生成单元测试…

vector(3)

vector(3) vector 迭代器失效问题。&#xff08;重点&#xff09; 迭代器的主要作用就是让算法能够不用关心底层数据结构&#xff0c;其底层实际就是一个指针&#xff0c;或者是对 指针进行了封装&#xff0c;比如&#xff1a;vector的迭代器就是原生态指针T 。因此迭代器失效…

sql server 用户只读表权限

新建登录名 数据库建用户 用户赋予登录名和架构 赋予用户只读权限 GRANT SELECT ON Users TO gt

Vue——Uniapp回到顶部悬浮按钮

代码示例 <template><view class"updata" click"handleup" :style"{bottom: bottomTypepx}" ><i class"iconfont icon-huidaodingbu"></i></view> </template><script> export default {n…

利用弹性盒子完成移动端布局(第二次实验作业)

需要实现的效果如下&#xff1a; 下面是首先是这个项目的框架&#xff1a; 然后是html页面的代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…

解决element-ui图标不出现,或者乱码问题(已解决)复制粘贴

其实就是资源没找到&#xff0c;需要你手动添加。 下载个文件 通过百度网盘分享的文件&#xff1a;css 链接&#xff1a;https://pan.baidu.com/s/1jLngnKV3PuDYu2ohSlE5IQ?pwdt1z9 提取码&#xff1a;t1z9 https://pan.baidu.com/s/1jLngnKV3PuDYu2ohSlE5IQ?pwdt1z9 提取…

Python_函数式编程(生成器、迭代器、动态性)

简单说&#xff1a;时间换空间&#xff01;想要得到庞大的数据&#xff0c;又想让它占用空间少&#xff0c;那就用生成器&#xff01;延迟计算&#xff01;需要的时候&#xff0c;再计算出数据&#xff01; 创建生成器的方式二(生成器函数)生成器函数&#xff1a; 如果一个函数…

Spirng事务的传播学习

事务传播&#xff1a;一个事务方法在被调用时&#xff0c;如何与现有事务的交互行为。当方法被事务性地调用时&#xff0c;他应该加入当前事务还是开启一个新事物。 常见的事务传播机制&#xff08;7种&#xff09;&#xff1a; Propagation枚举类&#xff0c;定义了传播机制…

【D3.js in Action 3 精译_034】4.1 D3 中的坐标轴的创建(中一)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…