vue实现input失去焦点
实现方法
使用 @blur 事件监听器可以轻松实现 input 失去焦点的功能。@blur 是 Vue 中专门用于处理失去焦点事件的指令。
<template>
<input v-model="inputValue" @blur="handleBlur" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleBlur() {
console.log('Input 失去焦点')
// 在这里添加失去焦点后的处理逻辑
}
}
}
</script>使用修饰符
Vue 提供了事件修饰符来简化事件处理。.lazy 修饰符可以将 v-model 的同步行为改为在 change 事件（失去焦点时触发）后同步。
<template>
<input v-model.lazy="inputValue" />
</template>自定义指令
对于更复杂的需求，可以创建自定义指令来处理失去焦点事件。
<template>
<input v-focus-blur />
</template>
<script>
export default {
directives: {
'focus-blur': {
inserted(el) {
el.addEventListener('blur', () => {
console.log('自定义指令处理失去焦点')
})
}
}
}
}
</script>结合验证功能
失去焦点时进行表单验证是常见需求，可以结合 @blur 和验证逻辑实现。
<template>
<input
v-model="email"
@blur="validateEmail"
:class="{ 'error': emailError }"
/>
<p v-if="emailError" class="error-message">请输入有效的邮箱地址</p>
</template>
<script>
export default {
data() {
return {
email: '',
emailError: false
}
},
methods: {
validateEmail() {
const re = /\S+@\S+\.\S+/
this.emailError = !re.test(this.email)
}
}
}
</script>
