vue3使用vue-count-to组件的实现


Posted in Vue.js onDecember 25, 2020

项目场景:

数据可视化大屏开发的过程中,需要实现一种滚动数字的效果,在使用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>

展示的效果

vue3使用vue-count-to组件的实现

问题描述:

出现的错误时 == Cannot read property ‘_c' of undefined== 这是一个_c的属性没有找到,具体的情况也不是很清楚。在vue-count-to打包后的源码中可以大致看出来,这是在render函数中出现的错误。但是还是没法下手。

vue3使用vue-count-to组件的实现

解决方案:

采用的方法是直接复制node_modules下vue-count-to的源文件(src下),到自己项目的components下。如图

vue3使用vue-count-to组件的实现

然后根据eslint的检查,修改代码,直到不报错,且记删除package.json下刚刚引入的vue-count-to的依赖。如图

vue3使用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>

到此这篇关于vue3使用vue-count-to组件的文章就介绍到这了,更多相关vue3 vue-count-to组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
You might like
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
两款万能的php分页类
2015/11/12 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
JS动画效果代码3
2008/04/03 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
JavaScript中的高级函数
2018/01/04 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
原生JS实现天气预报
2020/06/16 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
学习2014年全国两会心得体会
2014/03/12 职场文书
厕所文明标语
2014/06/11 职场文书
2014年计生标语
2014/06/23 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python