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

最新推荐文章于 2025-02-21 16:25:39 发布

damys

最新推荐文章于 2025-02-21 16:25:39 发布

阅读量388

点赞数 1

分类专栏： Vue3 文章标签：小程序 javascript vue.js 数字增加

本文链接：https://blog.youkuaiyun.com/damys/article/details/138526248

版权

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

<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 ? Ma