uni-app项目支付宝端Input不受控

xw52025-09-15 12:50

前情

最近又接手一个全新多端项目，包括抖音/快手/微信/支付宝，其中就有支付宝端，需要实现一个SKU选择，同时需要控制选择的商品数量，如下图：

坑位

既然是选择商品数量，那就不能让它出现小于等于0的数，我的想法是通过表单的input事件触发限制方法，限制它的值只允许在外面传进来的min~~max之间的值，我这里设置的是1~~99，也就是它的值只能为1~99

关键代码如下：

jsx 复制代码

<template>
    <input
      v-model="inputValue"
        controlled
      type="number"
      class="stepper-input"
      @input="handleInput"
    />
</template>

<script setup>
     // ...
    const inputValue = ref(1);
    // 处理输入框输入
    const handleInput = (e) => {
        const value = e.detail.value;
        // 其中props.min/max是从外面传进来的
        const value = Math.max(props.min, Math.min(props.max, newValue));
        inputValue.value = Number(value);
    };
    // ...
</script>

理想很丰满，现实很骨感，发现在支付宝表单可以输入任何数字，不受控制，但是我在handleInput里打印了日志，事件是有触发的

解决方案

给input加上controlled，让它变成受控组件，此时你修改inputValue的值是可以同步更新的

关键代码如下：

jsx 复制代码

<template>
    <input
      v-model="inputValue"
        controlled
      type="number"
      class="stepper-input"
      @input="handleInput"
    />
</template>

文挡说明如下，文挡地址：input 输入框 - 支付宝文档中心

总结

个人猜测支付宝小程序开发者应该是受React的影响，才会出现受控和非受控，因为这二个概念是React框架里的对于这种一端可以另一端不行的问题，一般就是平台的差异兼容问题，可以去对应平台的官方文挡看一下，也许能找到端倪，当然直接搜索引擎搜索也是可以的，对于做技术的我们每天都是在踩坑的路上，但我真心希望所有人都一路生花，少踩坑，也坚信坑坑难爬，坑坑过