社区 › 业界 › uni-app项目支付宝端Input不受控

焦听云 发表于 2025-9-15 10:56:11

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

前情

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

坑位

既然是选择商品数量，那就不能让它出现小于等于0的数，我的想法是通过表单的input事件触发限制方法，限制它的值只允许在外面传进来的minmax之间的值，我这里设置的是199，也就是它的值只能为1~99，通过左右加减是可以做到控制的，但是为更好的体验，允许用户直接输入数量
关键代码如下：
<template>
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template><input
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>v-model="inputValue"
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template><template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>controlled
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>type="number"
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>@input="handleInput"
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>/>
</template>理想很丰满，现实很骨感，发现在支付宝表单可以输入任何数字，不受控制，但是我在handleInput里打印了日志，事件是有触发的
解决方案

给input加上controlled，让它变成受控组件，此时你修改inputValue的值是可以同步更新的
关键代码如下：
<template>
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template><input
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>v-model="inputValue"
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template><template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>controlled
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>type="number"
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>@input="handleInput"
<template>
    <input
      v-model="inputValue"
      controlled
      type="number"
      
      @input="handleInput"
    />
</template>/>
</template>文挡说明如下，文挡地址：input 输入框 - 支付宝文档中心

总结

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

余思洁 发表于 2025-10-18 10:26:01

喜欢鼓捣这些软件，现在用得少，谢谢分享！

嗳诿 发表于 2025-10-27 08:54:37

谢谢楼主提供！

疝镜泛 发表于 2025-11-19 17:52:28

谢谢楼主提供！

叟澡帅 发表于 2025-12-11 13:29:28

前排留名，哈哈哈

搁胱 发表于 2025-12-19 20:35:36

yyds。多谢分享

袁可佳 发表于 2025-12-22 09:58:15

过来提前占个楼

蝙俚 发表于 2025-12-25 03:46:15

感谢，下载保存了

电棘缣 发表于 2025-12-25 14:33:32

这个好，看起来很实用

蟠鲤 发表于 2025-12-29 19:29:18

收藏一下   不知道什么时候能用到

赖珊 发表于 2026-1-2 17:39:18

谢谢楼主提供！

许娴广 发表于 2026-1-7 07:55:39

谢谢分享，试用一下

窝酴 发表于 2026-1-16 07:21:18

分享、互助 让互联网精神温暖你我

归筠溪 发表于 2026-1-20 18:25:58

谢谢楼主提供！

臧莞然 发表于 2026-1-22 11:14:16

很好很强大我过来先占个楼 待编辑

章娅萝 发表于 2026-1-23 07:57:44

谢谢分享，试用一下

娄静曼 发表于 2026-1-24 08:13:59

这个好，看起来很实用

挫莉虻 发表于 2026-1-24 09:51:42

谢谢分享，试用一下

劳暄美 发表于 2026-1-25 09:37:03

分享、互助 让互联网精神温暖你我

窖咎 发表于 2026-1-26 06:18:22

收藏一下   不知道什么时候能用到

查看完整版本: uni-app项目支付宝端Input不受控