logpm/compoment/InputNum/InputNum.vue

<template>
	<input class="inputNum" type="number" @input="inputNum" v-model="number" />
</template>

<script setup lang="ts">

	import { ref } from "vue";
	
	const number = ref<any>(10)

	const props = defineProps({
		// 输入框的值
		modelValue: {
			default: 0,
		},
		// 最大值
		maxNum: {
			type: Number,
			default: 999999
		},
		// 最小值
		minNum: {
			type: Number,
			default: 0
		},
	})
	
	
	number.value = props.modelValue
	
	const $emit = defineEmits(['update:modelValue'])
	
	let isInput = null
	
	// 防抖函数
	function inputNum() {
		// 重置定时器
		if(isInput) clearTimeout(isInput)
		// 开启定时器
		isInput = setTimeout(()=>{
			number.value = parseInt(number.value)
			// 当值不是数字为NaN时, number.value为0
			if (number.value !== number.value) number.value = 0
			// 最大限制
			if (number.value >= props.maxNum) number.value = props.maxNum
			// 最小限制
			if (number.value <= props.minNum) number.value = props.minNum
			$emit('update:modelValue', number.value)
		}, 500)
	}

</script>

<style>
	.inputNum{
		border: 1upx solid #000;
		padding-left: 10upx;
		border-radius: 5upx;
	}
	
</style>