How to implement div focus blur focus event in the vue environment

vue div focus blur focus event

onfocusGetting focus events and onblur lose focus events themselves are used in the input class.
inputIf the class is loaded after clicking, it needs to be a delay, otherwise an error will be reported.

setTimeout(()=>{
    this.$()
},100)

If you want to support div, you need to add tabindex="0" attribute //0 or above

However, in the vue environment, this is not supported, and the mobile terminal cannot use mouse events

<div tabindex="0" hidefocus="true" ref="aside" class="aside" @click="dialaing()" @blur='()=>{dialaingIsShow =false}'>
    <div v-show="dialaingIsShow" class="dialaing">dsadasd</div>
</div>

dialaing(){
       this.$()
        = true
},

That's it

vue div gain focus and lose focus

<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. = "0"
        this.$refs.()  //Get focus        this.left_show = true
      } else {
        this.aside1_hide()
      }
},
 
aside1_hide:function () {
      this.$refs. = "-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;
    /*Excessive effects when moving*/
    transition: left 500ms ease;
    color: #fff;
  }
}
 
@media screen and (max-width: 1200px) {
  /*Hide on the left*/
  .aside {
    position: fixed;
    /*Fixed positioning relative to the window*/
    top: 0;
    left: -200px;
    /*Hide on the left*/
    width: 200px;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #23303E;
    z-index: 100;
    /*Excessive effects when moving*/
    transition: left 500ms ease;
 
    /*padding: 36px;*/
    color: #fff;
  }
}
/*Can scroll, but hide scrollbar*/
.aside::-webkit-scrollbar {
  display: none;
}

The above is personal experience. I hope you can give you a reference and I hope you can support me more.