Vue失去焦点用法介绍

1. 概述

在Vue中，我们可以通过一些特定的指令或事件来实现元素失去焦点的效果。失去焦点常用于用户输入验证、自动保存等场景。本文将介绍Vue中几种常用的失去焦点方法，并提供示例代码和运行结果。

2. v-blur指令

Vue中的v-blur指令可以用于在元素失去焦点时执行指定的方法。我们可以通过自定义指令的方式来实现这一效果。

Vue.directive('blur', {
  inserted: function(el, binding) {
    el.addEventListener('blur', binding.value);
  }
});

在上述代码中，我们通过Vue.directive方法全局注册了一个名为blur的自定义指令。inserted钩子函数会在指令元素被插入到父元素时触发，我们在其中为指令元素添加了blur事件监听器，并在失去焦点时执行了绑定的方法。

在Vue的模板中，我们可以使用v-blur指令来绑定这个自定义指令。

<input type="text" v-blur="handleBlur">

上述代码中，v-blur="handleBlur"表示在输入框失去焦点时，调用Vue实例中的handleBlur方法。

示例代码如下：

<div id="app">
  <input type="text" v-blur="handleBlur">
  <p v-if="showMessage">{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    showMessage: false,
    message: ''
  },
  methods: {
    handleBlur: function() {
      if (this.showMessage) {
        alert(this.message);
      }
    }
  }
})

运行结果：当输入框失去焦点时，如果showMessage为true，弹出一个警示框，显示message的内容。

3. @blur事件

除了使用自定义指令以外，我们还可以使用Vue提供的内置事件@blur来处理失去焦点的操作。

<input type="text" @blur="handleBlur">

上述代码中，@blur="handleBlur"表示在输入框失去焦点时，调用Vue实例中的handleBlur方法。

示例代码如下：

<div id="app">
  <input type="text" @blur="handleBlur">
  <p v-if="showMessage">{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    showMessage: false,
    message: ''
  },
  methods: {
    handleBlur: function() {
      if (this.showMessage) {
        alert(this.message);
      }
    }
  }
})

运行结果：与前面的示例相同，当输入框失去焦点时，如果showMessage为true，弹出一个警示框，显示message的内容。

4. $refs获取元素

除了使用指令和事件来监听失去焦点事件，我们还可以通过使用Vue提供的$refs属性来获取元素，并在需要的时候手动调用失去焦点的方法。

示例代码如下：

<div id="app">
  <input type="text" ref="inputField">
  <button @click="blurInputField">失去焦点</button>
</div>

new Vue({
  el: '#app',
  methods: {
    blurInputField: function() {
      this.$refs.inputField.blur();
    }
  }
})

运行结果：点击“失去焦点”按钮后，输入框将失去焦点。

5. v-model和@input配合

在有些情况下，我们可能需要使用v-model指令来绑定表单元素的值，并在输入框失去焦点时进行处理。这时，我们可以结合使用@input事件和@blur事件来实现。

示例代码如下：

<div id="app">
  <input type="text" v-model="message" @input="handleInput" @blur="handleBlur">
  <p v-if="showMessage">{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    showMessage: false,
    message: ''
  },
  methods: {
    handleInput: function() {
      this.showMessage = false; // 每次输入时隐藏消息
    },
    handleBlur: function() {
      if (this.message.trim() !== '') { // 输入框有内容时显示消息
        this.showMessage = true;
        alert(this.message);
      }
    }
  }
})

运行结果：在输入框中输入内容并失去焦点后，如果输入框不为空，将弹出一个警示框并显示输入框的内容。