vue3+elementPlus：实现数字滚动效果（用于大屏可视化）

自行封装注册一个公共组件

案例一：

//成功案例：
//NumberScroll.vue
/*
数字滚动特效组件 NumberScroll
*/<template><span class="number-scroll-grow"><spanref="numberScroll":data-time="time"class="number-scroll":data-value="value">0</span></span>
</template><script>
import { defineComponent } from "vue";
export default defineComponent({name: "numberScroll",props: {time: {type: Number,default: 2,},value: {type: Number,default: 0,},thousandSign: {type: Boolean,default: () => false,},},data() {return {oldValue: 0,};},watch: {value: function (value, oldValue) {this.numberScroll(this.$refs.numberScroll);},},methods: {numberScroll(ele) {let _this = this;let value = _this.value - _this.oldValue;let step = (value * 10) / (_this.time * 100);let current = 0;let start = _this.oldValue;let t = setInterval(function () {start += step;if (start > _this.value) {clearInterval(t);start = _this.value;t = null;}if (current === start) {return;}current = parseInt(start);_this.oldValue = current;if (_this.thousandSign) {ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");} else {ele.innerHTML = current.toString();}}, 10);},},mounted() {this.$nextTick(() => {this.numberScroll(this.$refs.numberScroll);});},
});
</script><style lang="scss" scoped>
.number-scroll-grow {transform: translateZ(0);
}
</style>//单页面
//html
<div class="count"><!-- 组件 --><numberScroll :value="datalist.equip.realTimeDeviceCount" :time="30"></numberScroll>
</div>

案例二

这个是拉取vue-count-to插件源码，因为这个插件在vue3里不能用

//先在common文件夹建立requestAnimationFrame.js
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 }//再在components文件夹建立CountTo.vue
<template><span>{{displayValue}}</span></template><script>import { requestAnimationFrame, cancelAnimationFrame } from '../common/js/requestAnimationFrame.js'export default {props: {startVal: {type: Number,required: false,default: 0},endVal: {type: Number,required: false,default: null},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>//最后在单文件的html里直接使用
<count-to :
startVal="0" 
:endVal="datalist.equip.realTimeDeviceCount" 
:duration="4000">
</count-to>

上一篇文章，

uniapp踩坑之项目：uni.previewImage简易版预览单图片-CSDN博客文章浏览阅读547次。uniapp踩坑之项目：uni.previewImage简易版预览单图片，主要使用uni.previewImage_uni.previewimagehttps://blog.csdn.net/weixin_43928112/article/details/136565397?spm=1001.2014.3001.5501