uniapp的输入框组件化

实现过程（setup语法糖形式下）

1. 通过props获取父组件传递的初始化信息，如最大最小值，其中的提示语等
2. 通过v-model绑定变量，完成子组件中的值处理变量
3. 通过blur完成子组件中输入值的合法性校验，并在最后通过emit事件将合法值传递给父组件
4. 父组件通过合适的方法接收emit事件传递的值

子组件示例

<template>
    <view class="wordCnt">
        <input
        :placeholder="placeholderText"
        class="word-text"
        v-model="innerValue"
        @blur="blur"
        type="number"
        />
    </view>
</template>

<script setup>
    import { ref, defineProps } from 'vue';
    
    // 定义props，接收父组件传递的值
    const props = defineProps({
        value: {
            type: [Number, String],
            default: null
        },
        minValue: {
            type: Number,
            default: 200
        },
        maxValue: {
            type: Number,
            default: 2000
        }
    });
    
    // 计算提示语
    const placeholderText = computed(() => `默认字${props.minValue},最大${props.maxValue}字`);
    // 子组件中负责处理输入值的
    const innerValue = ref(props.value);
    // 存储上一次合法值,可以置为null
    const oldValue = ref(200)
    // 定义emit事件
    const emit = defineEmits(['wordCntInput']);


    // 处理失去焦点的时判断当前输入值是否合法，不合法则纠正，并将最后当前合法值通过emit事件传递给父组件
    const blur = () => {
        // 判断是否为数字
        if (!/^\d+$/.test(innerValue.value)) {
            // 本次输入不合法则将其回滚到上一次合法值
            innerValue.value = oldValue.value;
        } else {
            const value = parseInt(innerValue.value);
            // 判断是否在min - max之间
            if (value < props.minValue) {
                innerValue.value = props.minValue;
            } else if (value > props.maxValue) {
                innerValue.value = props.maxValue;
            }
        }
        oldValue.value = innerValue.value
        
        // emit传递给父组件
        emit('wordCntInput', innerValue.value);
    };
</script>

<style lang="scss" scoped>
.wordCnt{
        margin: 0rpx 30rpx;
        margin-bottom: 30rpx;
        border-radius: 20rpx;
        padding: 10rpx 30rpx;
        background-color: #ffffff;
        height: 50rpx;
        justify-content: center;
        align-items: center;
    .word-text{
        justify-content: center;
        align-items: center;
        text-align: right;
        font-size: 28rpx;
        line-height: 30rpx;
    }
}
</style>

父组件示例

<template>
	<WordCntInput 
	@wordCntInput="wordCntInput" 
	:minValue="200" 
	:maxValue="1000"/>

</template>

<script setup>
	import WordCntInput from '@/components/wordCnt/wordCnt.vue';
	
	// 定义父组件接收值的变量
	const wordCntText = ref()

	// 通过父组件变量保存子组件传递的合法输入值, 提供给后续逻辑使用
	const wordCntInput = (wordCnt) => {
		wordCntText.value = wordCnt
	}

</script>

<style lang="scss" scoped>
</style>