1隐轩、起初選擇使用keyup解決
<el-input? ?style="width:50px;"? v-model="skuPc.effectiveTime"? @keyup.native="number($event)"></el-input>
methods:{
????????number(e)?{
??????????????console.log(e.target.value);
??????????????let? flag?=?new?RegExp("^[1-9]([0-9])*$").test(e.target.value);
??????????????console.log(flag);
??????????????if?(!flag)?{
????????????????????????this.$message({
??????????????????????????????????showClose:?true,
??????????????????????????????????message:?"請輸入正整數(shù)",
??????????????????????????????????type:?"warning"
????????????????????????});
??????????????}
????}
}?
為什么el-input要用@keyup.native桐智?因為el-input是封裝的組件因篇,沒有原生的keyup事件诈闺,如果換作input標(biāo)簽唠倦,可直接使用@keyup。
這樣可以實現(xiàn)輸入非正整數(shù)時的內(nèi)容時實時提示苍糠,但是由于是keyup事件叁丧,會導(dǎo)致好幾個message提示信息同時出現(xiàn)在頁面上嗎,不太友好岳瞭。
2拥娄、換種事件,使用@blur
<el-input? style="width:50px;"? v-model="skuPc.effectiveTime" @blur="number($event)"><el-input>
這樣只有在輸入框失焦時候提示錯誤信息瞳筏,符合有好的用戶體驗要求稚瘾。