专栏首页喵君手记解决iview weapp的i-input组件在微信开发者工具中不能输入值的问题

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

记录下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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • git使用:commit之后撤销commit

    薛定喵君
  • JS深拷贝方法

    薛定喵君
  • 配置git多仓库ssh-key切换

    ::: warning 注意 git根据配置文件的user.email来获取git帐号显示author信息 对于多帐号用户一定要将user.email改为相...

    薛定喵君
  • 从第一台计算机共同成长为AI大牛,Bengio兄弟不为人知的故事

    Eye on A.I. 是由前纽约时报资深记者及高管 Craig S. Smith(Twitter handle: craigss)主持的一档双周播客节目。每一...

    机器之心
  • 学习|C++线程与指针结合的小例子

    C++11后在线程这块已经有了thread的类了,如果简单的std::thread可以直接就实现线程的操作,就要我们在开发过程中,很简单的线程可以直接用std:...

    Vaccae
  • 运营商遭虚拟运营商挖角:传统企业难抗衡互联网

    一个久未谋面的前运营商同事约我喝茶叙旧。聊的话题除了生活、创业之外,大多还是通信。最后这位朋友话锋一转,“你觉得虚拟运营商怎么样?”我立马反映过来,核心...

    罗超频道
  • OTT鱼水情,中国移动的自作多情

    中国移动的董事长在合作伙伴大会上说, OTT与传统运营商是鱼和水的关系,运营商要顺势而为。老大们都喜欢在媒体面前展现出外交官的能力,对外示好是必须的,但事实真是...

    用户1756920
  • nodejs-ORM 操作数据库中间件waterline的使用

    晓晨
  • 两个input标签之间间隙问题的解决

    IT人一直在路上
  • 第03问:磁盘 IO 报警,MySQL 读写哪个文件慢了?

    想观察 IO 相关的行为,需启用 performance_schema 的 instrument(生产者)和 consumer(消费者)。

    爱可生开源社区

扫码关注云+社区

领取腾讯云代金券