需求:只能输入数字且最多两位小数

				<el-input
                  placeholder="请输入价格"
                  v-model="feedsForm.price"
                  onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
                >

结论:在标签里用原生事件onkeyup写一句代码就行。(见上面代码)

以下是讲解:
如需求是:只能输入数字或字母

onkeyup="this.value=this.value.replace(/[\W]/g,'')"

但是这里有个坑!
vue的v-model是监听input框的input事件生效的。

而通过value直接操作dom元素,vue的v-model是监听不到的!

所以要手动分发一个input事件使v-model监听到。

this.dispatchEvent(new Event('input'))

最后:

onkeyup="this.value=this.value.replace(/[\W]/g,'');this.dispatchEvent(new Event('input'))"

不足:
这样会导致这句代码在每个input里面复用。也搜过其他人的封装。都感觉不是很灵活,因为只能针对同一种正则进行限制。留个坑看以后会不会封装吧。。

Logo

前往低代码交流专区

更多推荐