一个input框 获取焦点会出现一个弹窗,点击弹窗会给input赋值,但是input框有一个失去焦点事件,怎么让失去焦点事件最后执行
时间: 2024-04-09 11:28:51 浏览: 34
要让失去焦点事件最后执行,可以使用 `setTimeout` 函数来延迟执行失去焦点事件的回调函数。这样,在点击弹窗赋值后,失去焦点事件的回调函数会在一段时间后执行。
以下是一个示例代码:
```vue
<template>
<div>
<el-input ref="input" @focus="handleFocus" @blur="handleBlur"></el-input>
<el-dialog :visible="dialogVisible" @close="handleDialogClose">
<span @click="setValue">点击赋值</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
}
},
methods: {
handleFocus() {
console.log('Input 获得了焦点')
},
handleBlur() {
setTimeout(() => {
console.log('Input 失去了焦点')
}, 100)
},
handleDialogClose() {
this.$refs.input.focus()
},
setValue() {
this.dialogVisible = true
}
}
}
</script>
```
在上面的代码中,我们通过 `@focus` 和 `@blur` 绑定了获取焦点和失去焦点事件的回调函数。在点击弹窗赋值时,我们将 `dialogVisible` 设置为 true,弹窗显示,然后在弹窗关闭时重新让 input 获取焦点。
由于使用了 `setTimeout` 函数,失去焦点事件的回调函数会在 100 毫秒后执行,以确保点击弹窗赋值的逻辑先执行。
请根据你的具体需求和代码进行相应的修改和调整。
阅读全文