解決iview weapp的i-input組件在微信開發者工具中不能輸入值的問題

  • 2019 年 12 月 26 日
  • 筆記

記錄下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)

Tags:

VirMach 便宜 VPS