解决iview weapp的i-input组件在微信开发者工具中不能输入值的问题

2019-12-25 21:35: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)

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
微信扫码关注
加入百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
微信情报 更多 >
    每天进步一点点~