问题:由于计数器按钮可以长按,change监听到数据变化导致数秒内提交几十次数据
解决:
<el-row class="icy-taskdetail__select">
<el-col :span="6" class="icy-taskdetail__input"> <img class="icy-taskdetail__input--img" src="@/assets/images/task_estimatedHours.png" alt="预计工时" />预计工时 </el-col>
<el-col :span="18">
<el-input-number
width="100%"
v-model="taskDetail.estimatedHours"
:min="0"
@blur="onBlurEstimated(taskDetail.estimatedHours)"
@focus="focusLeaveEstimated()"
@mouseleave.native="mouseLeaveEstimated()"
@mouseover.native="onMouseEstimated()"
@change="onFocusEstimated()"
ref="estimated"
controls-position="right"
>
</el-input-number>
</el-col>
</el-row>
/** 添加 预计时间Input 失去焦点 鼠标离开 */
private onBulr = false
private outMouse = false
/** 初始时间 */
private oldValue = 0
private oldValueEstimated = 0
/**预计时间 通过按钮更改 Input 获得焦点 */
private onFocusEstimated() {
;(this.$refs.estimated as ElInputNumber).focus()
}
/** 预计时间 Input 失去焦点触发 */
private onBlurEstimated() {
this.onBulr = true
this.estimatedHoursIdChange()
}
/** 预计时间 Input 获得焦点触发 */
private focusLeaveEstimated() {
this.onBulr = false
}
/** 预计时间 Input 鼠标离开触发 */
private mouseLeaveEstimated() {
this.outMouse = true
}
/** 预计时间 Input 鼠标移入触发 */
private onMouseEstimated() {
this.outMouse = false
}
/** 更新预计时间时提交 */
private async estimatedHoursIdChange() {
try {
if (this.onBulr && this.outMouse) {
if (this.oldValueEstimated !== this.taskDetail.estimatedHours) {
await projectManagementApi.update(this.taskDetail)
}
this.oldValueEstimated = this.taskDetail.estimatedHours
}
// this.getTaskDetail()
} catch (e) {
this.getTaskDetail()
Message.error(e.msg)
}
}