Vue3使用vue-count-to数字滚动模块报错解决方案

已于 2022-11-12 19:20:35 修改
阅读量1.7k 收藏 1
点赞数 3
文章标签： vue.js javascript 前端
于 2022-11-12 15:59:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44647751/article/details/127821288
版权

小伙伴们是不是遇到了vue3项目使用vue-count-to出现报错的问题

报错如下：

TypeError: Cannot read properties of undefined (reading '_c')

这个错误信息具体是说没读取到_c的属性

具体不清楚是什么原因，排查还得去看源码，所以我们来解决：

1.我们去node_modules里面找到vue-count-to目录

2.打开vue-count-to目录里面的src目录

3.将src里的三个文件复制到我们的根目录src下的components文件夹内

 4.删除package.json内的 "vue-count-to": "^1.0.13"

 5.然后重启项目，按照vue-count-to正常用法使用即可

觉得有用的话，点个赞吧

null和undefined有什么区别
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3-count-to 数字跳动vue3.0
wwf1225的博客
04-02 3688
<template> <BaseCountTo ref="vueCountTo" :startVal="startVal" :endVal="endVal" :duration="duration" :decimals="decimals" :prefix="prefix" :suffix="suffix" :decimal="decimal" :separator="separator" ...
vue3使用vue-count-to组件
qq_38330707的博客
12-22 1万+
项目场景： 数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔符等等)，但是在vue3中使用会出现问题。 <template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">Ab
vue3数字滚动组件
qq_45600228的博客
04-17 380
效果图。
vue-count-to:vue-countTo的改造版本，支持 vue 2.0、3.0 版本
04-30
vue3-count-to 基于 vue-count-to 升级改造 预览 目的 由于原有作者好像没打算升级版本，故而自己升级维护一下。 兼容 当前版本同时兼容 vue2、vue3，亦能在ts下使用 运行环境 已经测试的运行环境，vite建议使用2.0+，webpack建议使用4.0+ 、 安装 && 引入 安装 npm install vue3-count-to --save # 或 yarn add vue3-count-to --save 全局注册 import countTo from 'vue3-count-to'; 使用 Vue 2: Vue.use(countTo); 使用 Vue 3: import { createApp } from 'vue'; const app = createApp(...); app.use(countTo); 局部引入 <template>
vue项目中使用vue-i18n报错的解决方法
12-09
前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下： npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况： Value of key ‘xxx’ is not string! Cannot translate the value of keypath ‘xxx’. Use the value of keypath as defa
Vue中使用vue-count-to（数字滚动插件）
热门推荐
m0_51431448的博客
07-14 2万+
vue-count-to就是一个组件插件，咱们引入进来，可以去打印一下，它就是一个组件实例，使用components注册一下，就可以在模板中使用了，具体方式如下。
vue3-count-to数字滚动
m0_73216899的博客
02-13 1142
无
vue3 Vite+Ts 数字滚动效果 vue3-count-to 组件使用方法
qq_39111074的博客
03-26 2340
vue3 Vite+Ts 数字滚动效果 vue3-count-to 组件使用方法
vue 数字滚动count-to插件，支持小数（包含vue3，网上整理）
u014678583的博客
12-08 1万+
vue3 npm install vue3-count-to --save <count-to :startVal="0" :endVal="3000.22" :decimals="2" :duration="3000"></count-to> import { CountTo } from 'vue3-count-to'; components: { CountTo }, 参考地址：https://github.com/xiaofan9/v...
vue3 | 数据可视化实现数字滚动特效
weixin_42974827的博客
09-13 1万+
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️。
vue-countTo不兼容vue3解决方案
weixin_45441173的博客
01-24 714
vue-countTo不兼容vue3解决方案
vue-countup-v2：countUp.js的Vue.js组件包装
02-06
vue-countup-v2 CountUp.js的Vue.js组件包装安装$ npm install --save countup.js vue-countup-v2用法< template> < div xss=removed> < ICountUp xss=removed xss=removed xss=removed xss=removed> </ div></ ...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
主要介绍了vue 解决uglifyjs-webpack-plugin打包出现报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解如何解决Vue和vue-template-compiler版本之间的问题
10-18
主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue插件 vue-countTo
苦作舟的空城机
09-06 1523
vue-countTo是一个无依赖，轻量级的vue组件，可以实现数字的滚动效果 属性 描述 类型 默认值 startVal 开始值 Number 0 endVal 结束值 Number 2017 duration 持续时间，以毫秒为单位 Number 3000 autoplay 自动播放 Boolean true decimals 要显示的小数位数 Number 0 decimal 十进制分割 String . separator 分隔符 String , pre
vue + vue-count-to 数字滚动计数
菜鸟karroy
06-26 9700
1、安装 npm install vue-count-to 2、使用 第一种方法： <template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> </template> <script> import countTo...
前端开发之vue-count-to使用和实例（数字滚动插件）
m0_50207524的博客
05-09 2047
可实现数字逐渐增加到某个值或者逐渐减少到某个值vue-countTo 是一个无依赖的轻量级 vue 组件，可以自己覆盖 easingFn。可以设置 startVal 和 endVal ，它会自动判断加计数或减计数。
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1188
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue3项目使用vue-count-to
09-20
vue3项目可以使用vue3-count-to来实现滚动数字的效果。在安装vue3-count-to之后，你可以在vue3项目中按照以下方式引入和使用它： 1. 首先，通过npm或yarn安装vue3-count-to： ``` npm install vue3-count-to --save ``` 或者 ``` yarn add vue3-count-to --save ``` 2. 在需要使用滚动数字效果的组件中引入vue3-count-to： ```javascript import { CountTo } from 'vue3-count-to'; ``` 3. 在组件模板中使用CountTo组件，并通过props传递相关参数： ```html <template> <div> <CountTo :startVal="0" :endVal="2045" :duration="4000" /> </div> </template> ``` 这样就可以在vue3项目中使用vue3-count-to实现滚动数字效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值