田心水原
田心水原
  • 发布:2019-11-13 15:28
  • 更新:2020-03-13 17:48
  • 阅读:1560

【报Bug】HBuilderX 切换新版本,input控件输入表现异常

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

我也任务DCloud产品不应该会有明显的Bug,但是我要提的问题应该是每个升级新版本的开发者都会发现的吧,论坛上竟然找不到相关问题,可能是我的代码问题。  

[内容]

HBuilderX 2.1.3版本input控件一切正常,曾几何时当我升级到2.3.x版本的时候发现input控件输入表现异常,当时没发现问题所在又急于发布版本就回退到2.1.3(可以正常使用)打包升级版本,我想一段时间之后DCloud平台应该会发现该问题然后解决到,今天升级到2.3.7版本看看是否解决该问题,然后令我失望的是还没有解决,具体测试部分看下面录屏

重现步骤

[步骤]
使用input控件接受用户输入

[结果]
input控件表现异常

[期望]
能正常看到输入的内容

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]
input控件输入表现异常视频
见附件

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX uniapp开发

[IDE版本号]
HBuilderX 2.3.x

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
全端(手机上)

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]
<template>
<view class="cu-form-group">
<view class="flex-row align-center">
<view class="flex-row flex-center width-5p mgr-5">
<view v-if="isRequired" class="cuicon cu-icon-favorfill text-red size-8"></view>
</view>
<text class="color-black" :class="labelLarge ? 'size-17': 'size-16'">{{label}}</text>
<text v-if="tipLabel" class="color-red size-10 mgl-3">{{tipLabel}}</text>
</view>
<input class="color-black text-right size-16" :value="value" :type="type" :maxlength="maxlength" :password="password"
placeholder-class="color-gray" :placeholder="placeholder" @input="$emit('input', $event.target.value)"></input>
</view>
</template>

<script>
export default {
model: {
prop: 'value',
event: 'input'
},

    props: {  
        label: {  
            type: String,  
            required: true  
        },  
        tipLabel: {  
            type: String,  
            default: null  
        },  
        placeholder: {  
            type: String,  
            default: '请输入'  
        },  
        isRequired: {  
            type: Boolean,  
            default: false  
        },  
        value: {  
            type: String,  
            required: true  
        },  
        type: {  
            type: String,  
            default: 'text'  
        },  
        maxlength: {  
            type: Number,  
            default: -1  
        },  
        password: {  
            type: Boolean,  
            default: false  
        },  
        labelLarge: {  
            type: Boolean,  
            default: false  
        }  
    }  
}  

</script>

<style>
</style>

联系方式

[QQ]

2019-11-13 15:28 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

看起来是你这个input绑定了一些东西造成的。你可以新写一个input看看有没有问题,删除input上的绑定看看哪里出了问题。

  • 田心水原 (作者)

    录屏的是我自己封装的一个组件,登录也用到了input,是页面直接使用input,没有通过v-model绑定,value和input事件做的,是OK的,但是封装起来后在页面使用这个封装的组件时用的v-model绑定

    2019-11-13 16:25

  • 田心水原 (作者)

    2.1.3版本是OK的,更新版本后在使用这种方式就有问题,几乎所有需要input的页面都用了这个封装的组件,我也不想每次都绑定事件再页面里面处理,所以用的v-model

    2019-11-13 16:28

  • 田心水原 (作者)

    还有一点没提到,电脑侧的H5和小程序模拟器里面用键盘输入是正常的

    2019-11-13 16:38

  • DCloud_heavensoft

    回复 田心水原: 把可重现问题的代码示例贴出来

    2019-11-13 17:07

  • 田心水原 (作者)

    回复 DCloud_heavensoft: 具体问题已经找出来了,新版本这样的写法支持的不好了:<input class="input" :placeholder="'请输入' + title + '...'" :type="type" :maxlength="maxlength" :value="value" @input="$emit('input', $event.target.value)" />,需要将@input的后面替换为方法,然后在方法里面emit出来就可以了

    2019-11-13 17:23

DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

已确认bug,感谢反馈

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

HBuilderX 2.4.3+ 已修复

该问题目前已经被锁定, 无法添加新回复