element ui的el-input-number修改數(shù)值失效

問題代碼

目的：實(shí)現(xiàn)去掉小數(shù)位。

<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
?? ?let re = /^[0-9]+$/
?? ?if (!re.test(this.cycle)) {
?? ??? ?this.$message.error('請輸入1~3600之間的正整數(shù)！')
?? ??? ?this.cycle = parseInt(this.cycle)
?? ?}
}

當(dāng)在輸入框輸入12.3時(shí)，光標(biāo)移開觸發(fā)change事件，輸入框的值會(huì)變成12；

再次反復(fù)操作，輸入12.3，光標(biāo)移開觸發(fā)change事件，輸入框的值仍然是12.3；

總之輸入框能不能祛除小數(shù)位不可控。

解決辦法

只需使用$nextTick函數(shù)，改為如下即可：

<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
?? ?let re = /^[0-9]+$/
?? ?if (!re.test(this.cycle)) {
?? ??? ?this.$message.error('請輸入1~3600之間的正整數(shù)！')
?? ??? ?this.$nextTick(() => {
?? ??? ??? ?this.cycle = parseInt(this.cycle)
? ? ? ? })
?? ?}
}

分析說明

el-input-number是element的一個(gè)組件，并非簡單的標(biāo)簽，而change事件監(jiān)聽的是整個(gè)組件。

也就是說，光標(biāo)移開觸發(fā)change事件，此時(shí)cycle值為12.3，馬上觸發(fā)dom更新。

此時(shí)修改了cycle的值，祛除了小數(shù)位。（當(dāng)前組件已經(jīng)被監(jiān)測到變化，已經(jīng)觸發(fā)了重新渲染dom，此時(shí)再修改并不會(huì)再次渲染dom。）

導(dǎo)致dom更新在前，cycle的值取整操作在后，并且此后無刷新控制dom重新渲染的指令。

所以dom上掛載顯示的值仍然是12.3，但是console.log(this.cycle)的值為12。

此時(shí)需要用到$nextTick函數(shù)，即在dom初次完成渲染掛載后，修改其值再次觸發(fā)dom渲染掛載。

官方資料

異步更新隊(duì)列：

可能你還沒有注意到，Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。

如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。

這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對于避免不必要的計(jì)算和 DOM 操作是非常重要的。

然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊(duì)列使用原生的 Promise.then 和 MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0) 代替。

需要用的$nextTick()的情況：

1、你在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是什么呢，原因是在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問題 。

2、在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。

最新說明

目前element更新到2.13.2版本可以通過“precision數(shù)值精度”去控制了。

<el-input-number size="mini" class="just-full-width" v-model="cycle" :min="1" :max="3600" :precision="0"></el-input-number>

但是有個(gè)弊端，就沒有填錯(cuò)的提示了…

el-input-number組件無法修改默認(rèn)值為空

<el-input-number v-model="num" ?:min="1" :max="10" label="描述文字"></el-input-number>

當(dāng)num設(shè)置為 null 或者 ""  都不能將輸入框的值變?yōu)榭?/p>

后來發(fā)現(xiàn) 將num 設(shè)置為  undefined

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論