logpm/compoment/InputNum/InputNum.vue

<template>
	<input class="inputNum" type="number" @blur="blurInput" 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)
			// 清除定时器
			clearTimeout(isInput)
		}, 300)
	}

	// 防抖函数
	function blurInput() {
		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)
		// 清除定时器
	}
</script>

<style>
	.inputNum {
		border: 1upx solid #999;
		padding: 5upx 20upx;
		border-radius: 5upx;
	}
</style>