项目场景:
数据可视化大屏开发的过程中,需要实现一种滚动数字的效果,在使用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源码
let lastTime = 0 const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀 let requestAnimationFrame let cancelAnimationFrame const isServer = typeof window === 'undefined' if (isServer) { requestAnimationFrame = function () { } cancelAnimationFrame = function () { } } else { requestAnimationFrame = window.requestAnimationFrame cancelAnimationFrame = window.cancelAnimationFrame let 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,则会退到setTimeout if (!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 + timeToCall callback(time) }, timeToCall) lastTime = currTime + timeToCall return 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.startVal this.startTime = null this.localDuration = this.duration this.paused = false this.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 = null this.localDuration = +this.remaining this.localStartVal = +this.printVal requestAnimationFrame(this.count) }, reset () { this.startTime = null cancelAnimationFrame(this.rAF) this.displayValue = this.formatNumber(this.startVal) }, count (timestamp) { if (!this.startTime) this.startTime = timestamp this.timestamp = timestamp const progress = timestamp - this.startTime this.remaining = this.localDuration - progress if (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>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue3使用vue-count-to组件的实现”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]