前言
前提是
element-ui版本為2.15.1及以下版本挂脑，因為說不定哪天element就會更新稀并，解決這個問題
最近在開發(fā)項目中，有一個需求是在el-input-number組件中直接輸入值震庭，然后離開鼠標(biāo)直接mouseenter其他的button,這個時候要獲取v-model的值担钮，發(fā)現(xiàn)v-model的值并不會改變，于是就真疼，查elementui的issure發(fā)現(xiàn)是因為el-input-number在封裝時并沒有將直接輸入的值賦值給v-model,然后自己細(xì)想一下使用@keyup事件把輸進去的值在給到v-model.
接下來是直接看代碼蕉世，簡單明了
因為el-input-number`是在失焦后才對input輸入框進行校驗蔼紧，但是我在hover另一個button的時候，其實并沒有失焦狠轻，所以這個時候v-model的值并沒有改變奸例，我需要另辟蹊徑，就是在keyup的時候把這個值給到v-model這樣就算是不失焦我也可以拿到改變后的v-model的值
<div class="size_select Quan_num_tity">
<el-input-number
v-model.number="choose_quantity"
:min="1"
:max="99"
:step="1"
step-strictly
@keyup.native="number_change($event)"
/>
</div>
<div class="Pay_immediately" @mouseenter.stop="show_qr_area($event)">掃描二維碼立即支付</div>
<script>
export default {
data() {
return {
choose_quantity: 1, //默認(rèn)的選擇購買的數(shù)
}
},
mounted() {},
methods: {
number_change(e) {
//在輸入的時候就要判斷只能輸入正整數(shù)
e.target.value = e.target.value.replace(/[^0-9]/g, '')
// 然后在每次keyup時把值賦給v-model
if (!e.target.value) {
// 這里給undefined是因為不給值就會默認(rèn)變?yōu)?哈误，不會為空哩至，導(dǎo)致用戶輸入不了別的數(shù)值
this.choose_quantity = undefined
} else {
this.choose_quantity = e.target.value
}
},
// hover支付button時判斷有沒有填寫數(shù)量
show_qr_area(){
if (!this.choose_quantity) {
this.$message({
message: 'Quantity cannot be empty !',
type: 'warning',
})
return false
}
}
},
}
</script>
結(jié)束語
到這里就是我的此次需求的解決方案，記錄下來蜜自，方便后續(xù)自己學(xué)習(xí)使用菩貌。
