極客之路
i-input組件在模擬器中不能輸入值問題的原因及解決辦法
最近開始用mpvue框架,所以遇到了一些坑,這篇文章記錄下關於input組件的一個坑。老司機請略過。
小程序裡做一個登錄頁,輸入手機號和密碼進行登錄。很簡單吧,用了iview之後頁面很快擼出來了，但是點擊輸入框敲打鍵盤之後發現無論輸什麼東西全部都輸不進去，這尼瑪什麼情況。預覽到手機上進行同樣的輸入竟然是可以的。
於是乎進行了一番搜索，發現有同學遇到了同樣的情況
⬇️
iview weapp 在小程序開發工具中i-input組件不能輸入值 (https://ask.csdn.net/questions/714891)
看了下自己的登錄頁,果然是沒加maxlength屬性
賬號登錄
type="text"
@change="accountChange"
placeholder="請輸入手機號"
:value="account"
/>
i-class="mt20"
@change="passwordChange"
type="password"
placeholder="請輸入密碼"
:value="password"
/>
i-class="login-btn"
@click="loginConfirm"
:loading="loginLoading"
type="primary"
size="small"
>登錄
type="info"
i-class="login-btn"
open-type="getUserInfo"
bind:getuserinfo="wxLogin"
size="small"
>微信快捷登錄
然後加了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)
