前言
前提是
element-ui版本为2.15.1及以下版本，因为说不定哪天element就会更新，解决这个问题
最近在开发项目中，有一个需求是在el-input-number组件中直接输入值，然后离开鼠标直接mouseenter其他的button,这个时候要获取v-model的值，发现v-model的值并不会改变，于是就真疼，查elementui的issure发现是因为el-input-number在封装时并没有将直接输入的值赋值给v-model,然后自己细想一下使用@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, //默认的选择购买的数
}
},
mounted() {},
methods: {
number_change(e) {
//在输入的时候就要判断只能输入正整数
e.target.value = e.target.value.replace(/[^0-9]/g, '')
// 然后在每次keyup时把值赋给v-model
if (!e.target.value) {
// 这里给undefined是因为不给值就会默认变为1，不会为空，导致用户输入不了别的数值
this.choose_quantity = undefined
} else {
this.choose_quantity = e.target.value
}
},
// hover支付button时判断有没有填写数量
show_qr_area(){
if (!this.choose_quantity) {
this.$message({
message: 'Quantity cannot be empty !',
type: 'warning',
})
return false
}
}
},
}
</script>
结束语
到这里就是我的此次需求的解决方案，记录下来，方便后续自己学习使用。
