前言
最近在使用uniapp制作支付宝小程序,遇到一个很有意思却让人苦恼的BUG,支付宝小程序对vue的支持并不友好,以至于部分vue指定在经过uniapp编译打包成小程序后,小程序并不支持。
问题:
我们在做登录页面需要在 input 里输入值,v-model 双向绑定到 data中,
<input type="text" value="" class="username" placeholder="请填写手机号" v-model="username"/>
<input type="text" value="" class=" password" placeholder="请输入你的密码" v-model="passWord"/>
到这里时原以为自写的代码天衣无缝,运行H5端没问题,运行在微信小程序没问题,真机测试没问题,支付宝小程序IDE也没问题,担当用支付宝小程序IDE的真机调试,完犊子了,输入框的光标出现跳动,删除时不能全部删除,总之输入体验极其不好,可是在慢速输入下没有问题。
为解决这个问题,我下载了uniapp官方的登录模板在支付宝小程序IDE下真机调试,还是会出现这种问题。
这里再调侃一下支付宝小程序的社区那是真的 “好” “好的不得了” 当天提出问题,回答问题的客服 “热情高涨” “恢复信息也很快” 解决办法让我 **使用支付宝小程序支持的代码*重写***
这个问题看似都不是问题的问题,造就了输入体验极差。究其根本就是支付宝小程序对vue的支持不友好导致的。我们需要绕过**v-model**使用其他办法 **@input**
献上代码
<input type="text" value="" class="username" placeholder="请填写手机号" @input="getUsername"/>
<input type="text" value="" class=" password" placeholder="请输入你的密码" @input="getPassWord"/>
// data中
data() {
return {
ischecked: false,
userName : '',
passWord : ''
}
}
//methods中
methods:{
getUsername:function(event){
// 绕过v-model 获取input输入框的值
this.userName = event.detail.value
console.log(this.userName)
}
即可不使用v-model获取input的值
8 个评论
要回复文章请先登录或注册
z***@163.com
7***@qq.com
7***@qq.com
8***@qq.com
2***@qq.com
1***@qq.com (作者)
d***@foxmail.com
DCloud_UNI_FXY