这篇文章主要介绍了vue3使用vue-count-to组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
项目场景：
数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔符等等)，但是在vue3中使用会出现问题。
<div id="nav"> Home | About</div>
展示的效果
问题描述：
出现的错误时 == Cannot read property ‘_c’ of undefined== 这是一个_c的属性没有找到，具体的情况也不是很清楚。在vue-count-to打包后的源码中可以大致看出来，这是在render函数中出现的错误。但是还是没法下手。
解决方案：
采用的方法是直接复制node_modules下vue-count-to的源文件（src下），到自己项目的components下。如图
然后根据eslint的检查，修改代码，直到不报错，且记删除package.json下刚刚引入的vue-count-to的依赖。如图
最后重启项目。
vue-count-to源码
let lastTime = 0 const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀 let requestAnimationFrame let cancelAnimationFrame const isServer = typeof window === 'undefined' if (isServer) { requestAnimat<strong style="color:transparent">来2源gaodaima#com搞(代@码&网</strong>ionFrame = function () { } cancelAnimationFrame = function () { } } else { requestAnimationFrame = window.requestAnimationFrame cancelAnimationFrame = window.cancelAnimationFrame let prefix // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式 for (let i = 0; i { const time = currTime + timeToCall callback(time) }, timeToCall) lastTime = currTime + timeToCall return id } cancelAnimationFrame = function (id) { window.clearTimeout(id) } } } export { requestAnimationFrame, cancelAnimationFrame }
<span> {{displayValue}} </span>
以上就是vue3使用vue-count-to组件的实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue3使用vue-count-to组件的实现
转载请注明原文链接：vue3使用vue-count-to组件的实现
