快捷導(dǎo)航

Vue中失去焦點時所觸發(fā)的事件問題

更新時間：2023年06月05日 10:41:19 作者：viceen

這篇文章主要介紹了Vue中失去焦點時所觸發(fā)的事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue失去焦點時所觸發(fā)的事件

1-html、失去焦點

<input type="text" onBlur="txtblur()">
<script>
? ? function txtblur(event){ //當(dāng)前元素失去焦點
? ? ? ? console.log(123);
? ? }
</script>

2-vue2.0、失去焦點

@input 一般用于監(jiān)聽事件，只要輸入的值變化了就會觸發(fā)input

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

@click 事件觸發(fā)事件

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

@blur 是什么？

@blur 是當(dāng)元素失去焦點時所觸發(fā)的事件

使用

<template>
? <div>
? ? <input type="text" placeholder="請輸入內(nèi)容" @blur="blur"/>
? </div>
</template>
<script>
? ? export default {
? ? ? name: "@blur_61",
? ? ? methods:{
? ? ? ? blur(){
? ? ? ? ? console.log("blur事件被執(zhí)行")
? ? ? ? }
? ? ? }
? ? }
</script>
<style scoped>
</style>

3-vue3.0、失去焦點

結(jié)構(gòu)

<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
};

vue div獲得焦點和失去焦點

<div tabindex="0" @blur="aside1_hide()" ref="aside1" class="aside" style="width: 200px; overflow: scroll;">
    <!-- background-color="#23303E" transparent -->
    <el-menu background-color="#23303E" text-color="#fff" active-text-color="#fff">
       ...
    </el-menu>
</div>

left_click: function() {
      if (!this.left_show) {
        this.$refs.aside1.style.left = "0"
        this.$refs.aside1.focus()  //獲得焦點
        this.left_show = true
      } else {
        this.aside1_hide()
      }
},
aside1_hide:function () {
      this.$refs.aside1.style.left = "-200px"
      this.left_show = false
},

 
@media screen and (min-width: 1200px) {
  .aside {
    position: static;
    width: 200px;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #23303E;
    z-index: 100;
    /*移動時的過度效果*/
    transition: left 500ms ease;
    color: #fff;
  }
}
@media screen and (max-width: 1200px) {
  /*隱藏在左邊*/
  .aside {
    position: fixed;
    /*相對于窗口固定定位*/
    top: 0;
    left: -200px;
    /*隱藏在左邊*/
    width: 200px;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #23303E;
    z-index: 100;
    /*移動時的過度效果*/
    transition: left 500ms ease;
    /*padding: 36px;*/
    color: #fff;
  }
}
/*可以滾動，但隱藏滾動條*/
.aside::-webkit-scrollbar {
  display: none;
}