1***@qq.com
1***@qq.com
  • 发布:2019-09-24 18:19
  • 更新:2019-09-25 10:14
  • 阅读:1190

【报Bug】input在同时使用了数据双向绑定以及i18n中英文翻译,导致输入的时候卡卡的,主要体现在app上

分类:uni-app

详细问题描述

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

[内容]使用uniapp编写的代码,其中input使用v-model双向绑定数据,并且使用了i18n中英文变量对placeholder进行变量替换,然后在app上输入的时候会感觉卡卡的,输入过快会出现输入丢失的问题,并且按住删除键会光标会一直闪,不能逐个删除

重现步骤

[步骤]1.使用input,使用v-model双向绑定数据,用i18n的变量放在placeholder里面
2.运行到真机上,快速输入以及按住删除键不放

[结果]输入时感觉一卡一卡,有时会出现输入丢失的情况,按住删除键会光标会一直闪,不能逐个删除

[期望]正常输入与删除

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

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

[IDE版本号]HBuilderX 2.3.3.20190923

[windows版本号]win10

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]app

[运行端版本号]Android9

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

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

App运行环境说明

[Android版本号]Android9

[iOS版本号]

[手机型号]HUAWEI P10 Plus

[模拟器型号]

附件

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

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
main.js
import VueI18n from 'vue-i18n'
const i18n = new VueI18n({
locale : uni.getStorageSync('language')||'zh-CN', //语言标识
messages: {
'zh-CN' : require('common/lang/zh.js'), //中文繁体语言包
'en-US' : require('common/lang/en.js') //英文语言包
}
})
Vue.prototype._i18n = i18n

Vue.prototype.$i18nMsg = function(e){//方便调用js文件而写
if(e){
// console.log(i18n.messages[i18n.locale].index.e); //undefined
//用key键值对的方式去写
// console.log(i18n.messages[i18n.locale].index[e]);
return i18n.messages[i18n.locale].index[e]
}
return ' ' //防止没有数据时,占位使用
}
test.vue
<template>
<view class="page-content">
<view class="form-input-row">
<view class="form-label">
{{$i18nMsg('login').login.mobile[0]}}
</view>
<view class="form-input-box">
<input type="text" v-model="mobile" :placeholder="$i18nMsg('login').login.mobile[1]" placeholder-style="color:#CCCCCC" />
</view>
</view>
</view>
</template>
[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]1145308642

2019-09-24 18:19 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

应该是i18n直接使用了模板导致性能消耗过大导致的,i18n用计算属性就可以了

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