Vue3大屏项目实现数字跳动的效果

一、vue-count-to组件:

1、安装:

npm install vue3-count-to --save

2、使用:

<template><BaseCountTo:startVal="startVal":endVal="endVal":duration="duration":decimals="decimals":prefix="prefix":suffix="suffix":decimal="decimal":separator="separator"/>
</template>
<script lang="ts">
import { defineComponent, watch, reactive, toRefs } from 'vue'
import { CountTo as BaseCountTo } from 'vue3-count-to'
export default defineComponent({name: 'EnterpriseInfo',components: {BaseCountTo},setup () {const data = reactive({startVal: 0, // 开始值endVal: 0, // 结束值 -- 可以写成动态的duration: 3000, // 跳动时长 - 单位:毫秒decimals: 0, // 小数点位数prefix: '', // 前缀suffix: '', // 后缀decimal: '', // //十进制分割separator: '', // 分隔符})return {...toRefs(data)}}
})
</script>

3、效果:

在这里插入图片描述

4、文档:

https://panjiachen.github.io/countTo/

二、vue-countup-v3 组件

1、安装:

npm i vue-countup-v3 --save

2、使用:

<template><count-up :end-val="endVal":duration="duration":decimal-places="decimals":options="options"@init="onInit"@finished="onFinished"></count-up>
</template>
<script lang="ts">
import { defineComponent, watch, reactive, toRefs } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'export default defineComponent({name: 'EnterpriseInfo',components: {CountUp},setup () {const data = reactive({startVal: 0, // 开始值endVal: 0, // 结束值 -- 可以写成动态的duration: 2.5, // 跳动时长 - 单位:秒decimals: 0, // 小数点位数countUp: undefined as ICountUp | undefined, // 跳动的对象options: {// 这里是跳动的数据的配置,可以配置分隔符[等...](https://github.com/inorganik/countUp.js)} as CountUpOptions})const onInit = (ctx: ICountUp) => {data.countUp = ctxconsole.log('开始',ctx)}const onFinished = () => {console.log('结束')}return {...toRefs(data),onInit,onFinished}}
})
</script>

3、效果:

在这里插入图片描述

4、文档:

https://inorganik.net/

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

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

相关文章

基于复旦微的FMQL45T900全国产化ARM核心模块(100%国产化)

TES745D是一款基于上海复旦微电子FMQL45T900的全国产化ARM核心板。该核心板将复旦微的FMQL45T900&#xff08;与XILINX的XC7Z045-2FFG900I兼容&#xff09;的最小系统集成在了一个87*117mm的核心板上&#xff0c;可以作为一个核心模块&#xff0c;进行功能性扩展&#xff0c;能…

Redis 五大类型源码及底层实现

面试题&#xff1a; 谈谈Redis数据类型的底层数据结构&#xff1a; SDS动态字符串双向链表玉缩列表ziplist哈希表hashtable跳表kiplist整数集合intset快速列表quicklist紧凑列表listpack Redis源代码的核心部分 官网&#xff1a;GitHub - redis/redis: Redis is an in-memory…

在已知的二维坐标里找到最接近的点

一、业务场景 最近在研发的项目&#xff0c;在做可视化层&#xff0c;在全球地图上&#xff0c;对我们的国家的陆地地图经纬度按照步长为1的间隔做了二维处理。在得到一组整数的点位信息后&#xff0c;需要将我们已有的数据库数据(业务项目)按照地址的经纬度&#xff0c;映射到…

大数据Flink(八十三):SQL语法的DML:With、SELECT WHERE、SELECT DISTINCT 子句

文章目录 SQL语法的DML:With、SELECT & WHERE、SELECT DISTINCT 子句 一、DML:With 子句

本地Docker Registry远程连接,为你带来高效便捷的镜像管理体验!

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…

jmeterbeanshell调用jsonpath获取对应值

1.jmeter 新建线程组、Java Request、BeanShell Assertion、View Results Tree 2、在BeanShell Assertion中贴入代码&#xff1a; import org.apache.jmeter.extractor.json.jsonpath.JSONManager; import java.util.List; JSONManager js new JSONManager(); String jsonStr…

电商项目高级篇-01 elasticsearch

电商项目高级篇-01 elasticsearch 1、linux下安装elasticsearch和可视化工具2、docker设置虚拟机开机启动和容器开机启动3、elasticsearch的curd3.1、新增、更新3.2、查询 1、linux下安装elasticsearch和可视化工具 将安装好jdk1.8和tomcat的centos7下安装elasticsearch dock…

贝叶斯神经网络 BBB 学习中遇到的一些问题

这里写目录标题 贝叶斯公式模型概率的公式1/n 形式的贝叶斯公式 全概率公式全概率公式的积分形式 后验推理后验预测分布 posterior predictive distributionKL 散度 平均场 VIBayes by Backprop 代码重新参数化 贝叶斯公式 模型概率的公式 一开始看了这个 https://zhuanlan.z…

Unity 2021.x及以下全版本Crack

前言 最近Unity那档子事不出来了吗&#xff0c;搞得所有人都挺烦的&#xff0c;顺便在公司内网需要我完成一个游戏的项目&#xff0c;就研究了一下如何将Unity给Crack掉。 注意所有操作应有连接外网的权限 以我选择的版本为例&#xff0c;我使用的是Unity 2021.3.5f1与Unity…

企业商标信息API:品牌管理的秘密武器

引言 当今数字时代&#xff0c;品牌管理变得比以往任何时候都更具挑战性。企业需要不断创新、保护知识产权、实时监测市场动态以及应对竞争压力。在这个竞争激烈的环境中&#xff0c;企业商标信息API已经成为品牌管理的秘密武器&#xff0c;为企业提供了无可估量的价值。 企业…

CFCA企业版通配符SSL证书

CFCA是中国CFCA企业版通配符SSL证书金融认证中心的缩写&#xff0c;即China Financial Certification Authority。它是一家经过中国人民银行和国家信息安全机构批准成立的国家级权威安全认证机构&#xff0c;也是国际CA浏览器联盟组织&#xff08;CA/Browser Forum&#xff09;…

基础算法--位运算

位运算理解&#xff1a; n >> k&#xff1a;代表n右移k位 比如 000011 >> 1 000001 前面会补零&#xff08;所以第几位是从0开始计算&#xff09; n & 1&#xff1a;表示最后一位是否为1 比如&#xff1a;n 3 0011 而 1 0001 则3 & 1 0011 & 000…

红日靶场五(vulnstack5)渗透分析

环境搭建 win7 192.168.111.132&#xff08;仅主机&#xff09; 192.168.123.212&#xff08;桥接&#xff09; .\heart p-0p-0p-0win2008 ip: 192.168.111.131&#xff08;仅主机&#xff09; sun\admin 2020.comkali ip: 192.168.10.131&#xff08;nat&#xff09;vps&…

【vue】vue+easyPlayer 实现宫格布局及视频播放

由于业务需要&#xff0c;ant-design-vue框架集成easyPlayer.js作为视频播放器。EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC等多种音视频编码格…

解密list的底层奥秘

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…

CDN加速器有哪些?

一、前端使用CDN加速的优缺点 1.CDN优点 (1). 提高网站性能&#xff1a; CDN&#xff08;内容分发网络&#xff09;可以将静态资源&#xff08;如脚本、样式表、图片等&#xff09;缓存在服务器节点上&#xff0c;并通过就近访问用户&#xff0c;从而提供更快的加载速度和更好…

服务器搭建(TCP套接字)-基础版(客户端)

一、socket 1.1、vim man查看socket :!man socket1.2、 依赖的头文件 #include <sys/types.h> #include <sys/socket.h>1.3、原型 int socket(int domain, int type, int protocol);domain说明AF_INETIPV4协议AF_INET6IPV6协议AF_LOCALUnix域协议 type说明S…

GDPU 数据结构 天码行空2

实验内容 用顺序表实现病历信息的管理与查询功能。具体要求如下: 利用教材中定义顺序表类型存储病人病历信息(病历号,姓名&#xff0c;症状)&#xff1b;要求使用头文件。 设计顺序表定位查找算法&#xff0c;写成一个函数&#xff0c;完成的功能为:在线性表L中查找数据元素x…

MATLAB中ilu函数用法

目录 语法 说明 示例 不同类型的不完全 LU 分解 不完全 LU 分解的调降容差 使用 ilu 作为预条件子来求解线性系统 ilu函数的功能是对矩阵进行不完全 LU 分解。 语法 [L,U] ilu(A) [L,U,P] ilu(A) W ilu(A) [___] ilu(A,options) 说明 [L,U] ilu(A) 用零填充执行…

前端框架vBean admin

文章目录 引言I 数据库表设计1.1 用户表1.2 角色表1.3 菜单表II 接口引言 文档:https://doc.vvbin.cn/guide/introduction.html http://doc.vvbin.cn 仓库:https://github.com/vbenjs/vue-vben-admin git clone https://github.com/vbenjs/vue-vben-admin-doc 在线体验demo:…