当前位置：首页 > VUE

vue实现input失去焦点

2026-02-22 19:25:28VUE

实现方法

使用 @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>

vue实现input失去焦点