vue element ui input 自动获取焦点（解决只有第一次起作用问题，autofocus失效问题解决）

 实现默认显示编辑图标，点击图标出现输入框，失焦输入框消失显示图标

 修改前，只有第一次会自动选中，其他几次要手动选中

 修改后，每次可以用事件去触发自动选中

 

 上代码 利用this.$refs.getFocus.focus();

 <div class="edit_icon">
    <div v-if="ModelDesign==false"> {{printFn(sumQuotationObj.dzDesignFee)}} </div>
 <el-input v-if="ModelDesign==true" @blur="ModelDesignClick" v-model="sumQuotationObj.dzDesignFee" class="inp_dz" :autofocus="true" ref="getFocus" size=small></el-input>
 <i v-else class="el-icon-edit-outline blue_color" @click="ModelDesignEdit"></i>
  </div>

data() {
    return {
   Designfocus: false
 }
}


  methods: {

ModelDesignEdit() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.$refs.getFocus.focus(); // 等价  document.getElementById("inputValId").focus();
      }, 100);   //重点看这个语句

      this.ModelDesign = true;
    },

    ModelDesignClick(e) {
      console.log(e);
      this.ModelDesign = false;
    },
}