解决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)