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

最新推荐文章于 2024-08-22 13:57:45 发布

大大。

最新推荐文章于 2024-08-22 13:57:45 发布

阅读量1.2k

点赞数

分类专栏： element相关文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/weixin_43923808/article/details/129378474

版权

element相关专栏收录该内容

44 篇文章 0 订阅

订阅专栏

文章描述了在Vue.js应用中如何修改代码，使得每次点击编辑图标时输入框能自动获取焦点，并在输入框失去焦点后恢复显示编辑图标。通过使用this.$refs和setTimeout函数确保了自动选中效果的实现。

摘要由CSDN通过智能技术生成

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

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

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

上代码利用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;
    },
}