解决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-inputi-class="mt20"@change="passwordChange"type="password"placeholder="请输入密码":value="password"/></div><div class="operate"><i-buttoni-class="login-btn"@click="loginConfirm":loading="loginLoading"type="primary"size="small">登录</i-button><i-buttontype="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)

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

【uniapp、微信小程序】解决引入外部字体在H5中生效，微信开发者工具中不生效的问题
项目场景: 首先:我们按照正常步骤引入. 1.在App.vue中引入: @font-face {font-family: 'Branding-BoldItalic'; //自定义的,一会儿用这个src ...
微信开发者工具黑屏/打不开解决办法
刚开始搞微信小程序开发,安装完微信开发者工具后一直打不开,或者黑屏.透明. 尝试过: 1.重启电脑.卸载重装.64位换32位: 2.更换安装路径等网上找到的解决办法但是都没有解决最终解决办法: C ...
uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）
1.在微信开发者工具中运行 1.配置小程序IDE相关路径说明:只有配置了才能在微信小程序运开发者工具中运行成功 2.开启小程序IDE服务端口的设置->安全设置->安全 (开启) 3. 修 ...
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
微信小程序-魔镜笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示视频演示经历了一次升级之后,我的小程序怎么样了? 文章目录微信小程序-魔镜笔记&源码(微信开发 ...
微信开发者工具如何引入 Vant weapp框架
提示:切记不要起中文名字 ,容易报错. 先初始化 npm init -y npm:用 npm i @vant/weapp -S --production yarn 用 yarn add @vant/w ...
DBGRIDEH 组件在Borland开发工具中应用全攻略
DBGRIDEH 组件在Borland开发工具中应用全攻略 2003-08-05 16:36:18 陈文彬 DBGRIDEH 是Enlib 3.0组件包中的组件之一.E ...
Linux微信运行错误,Ubuntu 16.04 运行微信开发者工具编译出错的解决办法
最近有折腾小程序的意向,但微信的开发者工具只提供了 Windows 和 Mac 两个版本,对于我这样的 Linux 用户来说不是那么地友好. 经过观察发现,那个开发者工具实际上是基于nw.js开发的, ...
用微信开发者工具--打开微信小程序weui组件示例
浏览器搜索 :https://github.com/Tencent/weui-wxss/ 1.下载为小程序设计的weui组件, 2.在开发者工具中打开dist目录,而不是整个目录, 在开发者工具中就可 ...
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录已解决
前言微信开发者工具 > 小程序分包的时候报错app.json: ["subpackages"][0]["root"] 字段需为目录解决解决办法很简 ...

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

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

最新文章

热门文章