VUE3----数字增加，兼容小程序, 组件封装

最新推荐文章于 2025-01-06 16:32:22 发布

原创

最新推荐文章于 2025-01-06 16:32:22 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #vue.js #数字增加

数字增加，兼容小程序, 组件封装

<template>
	<view>{
  
  {props.prefix}}{
  
  { displayValue }}{
  
  {props.suffix}}</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		requestAnimationFrame,
		cancelAnimationFrame
	} from '@/utils/base/requestAnimationFrame'

	const props = defineProps({
		start: {
			type: Number,
			default: 0
		},
		end: {
			type: Number,
			required: true
		},
		duration: {
			type: Number,
			default: 2000
		},
		prefix: {
			type: String,
			default: '',
		},
		suffix: {
			type: String,
			default: '',
		},
	});

	let timer = ''
	const frame = 1000 / 60 // 16.7
	const displayValue = ref(props.start);

	const startCount = () => {
		if (timer) {
			clearInterval(timer);
		}

		let step = (props.end - props.start) / (props.duration / frame);
		step = step > 0 ? Math.ceil(step) : Math.floor(step);

		timer = setInterval(() => {
			if