项目场景：

数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔符等等)，但是在vue3中使用会出现问题。

<template><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><count-to :startVal="0" :endVal="2045" :duration="4000"></count-to><router-view/>
</template>

展示的效果

问题描述：

出现的错误时 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组件 vue3使用

vue-count-to源码

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀let requestAnimationFrame
let cancelAnimationFrameconst isServer = typeof window === 'undefined'
if (isServer) {requestAnimationFrame = function () {}cancelAnimationFrame = function () {}
} else {requestAnimationFrame = window.requestAnimationFramecancelAnimationFrame = window.cancelAnimationFramelet prefix// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式for (let i = 0; i < prefixes.length; i++) {if (requestAnimationFrame && cancelAnimationFrame) { break }prefix = prefixes[i]requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']}// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeoutif (!requestAnimationFrame || !cancelAnimationFrame) {requestAnimationFrame = function (callback) {const currTime = new Date().getTime()// 为了使setTimteout的尽可能的接近每秒60帧的效果const timeToCall = Math.max(0, 16 - (currTime - lastTime))const id = window.setTimeout(() => {const time = currTime + timeToCallcallback(time)}, timeToCall)lastTime = currTime + timeToCallreturn id}cancelAnimationFrame = function (id) {window.clearTimeout(id)}}
}export { requestAnimationFrame, cancelAnimationFrame }

<template><span>{{displayValue}}</span>
</template>
<script>import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
export default {props: {startVal: {type: Number,required: false,default: 0},endVal: {type: Number,required: false,default: 2017},duration: {type: Number,required: false,default: 3000},autoplay: {type: Boolean,required: false,default: true},decimals: {type: Number,required: false,default: 0,validator (value) {return value >= 0}},decimal: {type: String,required: false,default: '.'},separator: {type: String,required: false,default: ','},prefix: {type: String,required: false,default: ''},suffix: {type: String,required: false,default: ''},useEasing: {type: Boolean,required: false,default: true},easingFn: {type: Function,default (t, b, c, d) {return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b}}},data () {return {localStartVal: this.startVal,displayValue: this.formatNumber(this.startVal),printVal: null,paused: false,localDuration: this.duration,startTime: null,timestamp: null,remaining: null,rAF: null}},computed: {countDown () {return this.startVal > this.endVal}},watch: {startVal () {if (this.autoplay) {this.start()}},endVal () {if (this.autoplay) {this.start()}}},mounted () {if (this.autoplay) {this.start()}this.$emit('mountedCallback')},methods: {start () {this.localStartVal = this.startValthis.startTime = nullthis.localDuration = this.durationthis.paused = falsethis.rAF = requestAnimationFrame(this.count)},pauseResume () {if (this.paused) {this.resume()this.paused = false} else {this.pause()this.paused = true}},pause () {cancelAnimationFrame(this.rAF)},resume () {this.startTime = nullthis.localDuration = +this.remainingthis.localStartVal = +this.printValrequestAnimationFrame(this.count)},reset () {this.startTime = nullcancelAnimationFrame(this.rAF)this.displayValue = this.formatNumber(this.startVal)},count (timestamp) {if (!this.startTime) this.startTime = timestampthis.timestamp = timestampconst progress = timestamp - this.startTimethis.remaining = this.localDuration - progressif (this.useEasing) {if (this.countDown) {this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)} else {this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration)}} else {if (this.countDown) {this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration))} else {this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration)}}if (this.countDown) {this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal} else {this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal}this.displayValue = this.formatNumber(this.printVal)if (progress < this.localDuration) {this.rAF = requestAnimationFrame(this.count)} else {this.$emit('callback')}},isNumber (val) {return !isNaN(parseFloat(val))},formatNumber (num) {num = num.toFixed(this.decimals)num += ''const x = num.split('.')let x1 = x[0]const x2 = x.length > 1 ? this.decimal + x[1] : ''const rgx = /(\d+)(\d{3})/if (this.separator && !this.isNumber(this.separator)) {while (rgx.test(x1)) {x1 = x1.replace(rgx, '$1' + this.separator + '$2')}}return this.prefix + x1 + x2 + this.suffix}},unmounted () {cancelAnimationFrame(this.rAF)}
}</script>

vue3使用vue-count-to组件相关推荐

基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
Vue学习之组件基础学习
目录组件开发一.组件的结构与注册 1.1 组件的data必须是函数,且必须返回一个实例对象(对象内部保存着数据) 1.2 组件的组织 1.3 局部组件与全局组件 "我的附庸的附庸不是我的 ...
【Vue】Vite 组件化开发
文章目录组件化开发一.组件化开发思想二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
cli3解决 ie11语法错误 vue_从零到一教你基于vue开发一个组件库高性能前端架构解决方案...
Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.虽然笔者有近2年没有从事vue的开发了,但平时一直在关注vue的更新和发展,笔者一直认为技术团队的组件化之路重点在于基础架 ...
vue3 封装文件上传组件
由于工作需要,项目中经常需要文件上传这个功能,根据业务的需求,使用vue3 简单封装通用型组件. 作用:主要是用来上传图片的一个通用型组件,当然可以上传文件.支持校验尺寸 , 像素, 文件大小,可以 ...
android弹窗不能手动关闭_vue3.0系列：Vue3自定义PC端弹窗组件V3Layer
今天给大家分享的是Vue3系列之自定义桌面端对话框组件v3layer. V3Layer 基于vue3.0构建的多功能PC网页端弹窗组件.拥有超过10+种弹窗类型.30+种参数配置,支持拖拽(自定义拖拽 ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决
这里介绍两种组件调用的方法: 1.直接在当前组件(HelloVue.vue)中使用Vue.component插入一个子组件button-counter: <template><div ...

vue3使用vue-count-to组件

项目场景：

问题描述：

解决方案：

vue-count-to源码

vue3使用vue-count-to组件相关推荐

最新文章

热门文章