vue3 | 数据可视化实现数字滚动特效

简介: q

vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错:
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

思路
使用Vue.component定义公共组件,使用window.requestAnimationFrame(首选,次选setTimeout)来循环数字动画,window.cancelAnimationFrame取消数字动画效果,封装一个requestAnimationFrame.js公共文件,CountTo.vue组件,入口导出文件index.js。
————————————————

相关文章
|
10月前
|
前端开发
Vue3 大屏数字滚动效果
Vue3 大屏数字滚动效果
342 0
|
JavaScript
vue动画appear 实现页面刚展示出来的时候,入场效果
vue动画appear 实现页面刚展示出来的时候,入场效果
|
数据可视化 定位技术
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
294 0
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
|
10月前
|
资源调度 JavaScript 前端开发
vue图表制作
vue图表制作
84 0
|
JavaScript 定位技术 API
Vue + Echarts + 高德地图 实现点击下探图表
Vue + Echarts + 高德地图 实现点击下探图表
427 0
|
10月前
|
JavaScript 容器
vue echarts图表自适应屏幕变化
vue echarts图表自适应屏幕变化
384 0
|
10月前
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
139 0
|
JavaScript 数据可视化 定位技术
vue中使用echarts实现地图可视化(上)
vue中使用echarts实现地图可视化