element ui的el-input-number修改數(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)
?? ?}
}

當在輸入框輸入12.3時，光標移開觸發(fā)change事件，輸入框的值會變成12；

再次反復操作，輸入12.3，光標移開觸發(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的一個組件，并非簡單的標簽，而change事件監(jiān)聽的是整個組件。

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

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

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

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

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

官方資料

異步更新隊列：

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

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

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

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

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

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

2、在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時候，這個操作都應(yīng)該放進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>

但是有個弊端，就沒有填錯的提示了…

el-input-number組件無法修改默認值為空

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

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

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

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

最新評論