记录下i-input组件在模拟器中不能输入值问题的原因及解决办法
最近开始用mpvue框架,所以遇到了一些坑,这篇文章记录下关于input组件的一个坑。老司机请略过。
小程序里做一个登录页,输入手机号和密码进行登录。很简单吧,用了iview之后页面很快撸出来了，但是点击输入框敲打键盘之后发现无论输什么东西全部都输不进去，这尼玛什么情况。预览到手机上进行同样的输入竟然是可以的。
于是乎进行了一番搜索，发现有同学遇到了同样的情况
⬇️
iview weapp 在小程序开发工具中i-input组件不能输入值
看了下自己的登录页,果然是没加maxlength属性
<template>
<div class="main">
<div class="login">
<div class="title">账号登录</div>
<div class="account pr15">
<i-input type="text" @change="accountChange" placeholder="请输入手机号" :value="account" />
</div>
<div class="password pr15">
<i-input
i-class="mt20"
@change="passwordChange"
type="password"
placeholder="请输入密码"
:value="password"
/>
</div>
<div class="operate">
<i-button
i-class="login-btn"
@click="loginConfirm"
:loading="loginLoading"
type="primary"
size="small"
>登录</i-button>
<i-button
type="info"
i-class="login-btn"
open-type="getUserInfo"
bind:getuserinfo="wxLogin"
size="small"
>微信快捷登录</i-button>
</div>
<i-toast id="toast" />
</div>
</div>
</template>
然后加了maxlength之后竟然在模拟器就可以正常输入了。
虽然这样就解决了，但是为啥呢，仔细想了想，直觉告诉我是默认值的问题，会不会是因为没有默认值导致maxlength为0使得输入值被清掉了?
我们先来查看一下没设置maxlength时的shadowdom结构
可以发现显示的maxlength值为0
我们再去查看iview的input组件源码
Component({
behaviors: ['wx://form-field'],
externalClasses: ['i-class','t-class'],
properties: {
...
maxlength: {
type: Number
}
},
可以发现maxlength属性下仅设置了type属性
接着我们尝试给maxlength加一个value来设置组件属性的默认值，这里我们设置为100来尝试下。
···
maxlength: {
type: Number,
value: 100
}
···
在页面引用标签的地方不用设置maxlength就可以发现在微信开发者工具中也可以输入值了(因为组件里设置的默认值为100)
