Vue 中失去焦点时所触发的事件

Vue 中失去焦点时所触发的事件

1-html、失去焦点

<input type="text" onBlur="txtblur()">
<script>
    function txtblur(event){ //当前元素失去焦点
        console.log(123);
    }
</script>
 

2-vue2.0、失去焦点

@input 一般用于监听事件，只要输入的值变化了就会触发 input

<input 
       :type="type" 
       :value="value" 
       :placeholder="placeholder" 
       :name="name" 
       @input="$emit('input',$event.target.value)"
       />
 

@click 事件触发事件

<input type="text" @click="clickFn">
 

@blur 是什么？

@blur 是当元素失去焦点时所触发的事件

使用

<template>
  <div>
    <input type="text" placeholder="请输入内容" @blur="blur"/>
  </div>
</template>
 
<script>
    export default {
      name: "@blur_61",
      methods:{
        blur(){
          console.log("blur事件被执行")
        }
      }
    }
</script>
 
<style scoped>
 
</style>
 

3-vue3.0、失去焦点

结构

<el-input
          v-model="inputValue"
          v-bind="$attrs"
          @blur="handleBlur"
          @input="handleInput"
          class="custom-input"
          >
</el-input>
 

方法

const handleBlur = () => {}
const handleInput =  (v) => {}
 
return {
    ...toRefs(state),
    handleBlur,
    handleInput
};