开发中遇到一个bug:
在这里的编码框输入的数据,需求是仅可以输入英文和数字。因此使用了以下代码来限制:
<el-input oninput="value=value.replace(/[^\a-z0-9A-Z]/g,'')">
测试中,使用搜狗输入法没有这个问题,而使用window的微软输入法,则会在关闭dialog再打开之后,输入框中残留英文,并且v-model双向绑定失效。
输入时,不取消输入法,直接关闭dialog
再次打开dialog,英文还在,并且与v-model绑定的form数据分离。
使用了很多手段去强行绑定form和dom,都无法完美解决。后经同事帮助,有以下两种方法:
1. 使用v-if,在每次打开dialog时,重新创建这个el-input的dom
<el-input v-if="visibleDialog" oninput="value=value.replace(/[^\a-z0-9A-Z]/g,'')">
2. 使用正则替换时,不替换dom的value,而是替换form中的数据
<el-input v-on:input="handleOnChange">
handleOnChange() {
this.moduleForm.catNo = this.moduleForm.catNo.replace(/[^a-z0-9A-Z]/g, '');
},
可能在经验丰富的前端开发者手中这不是个大问题,可我花了几个小时都没彻底解决……踏踏实实积累经验吧!