el-input聚焦失效Autofocus processing was blocked because a document already has a focused element.

问题
目前是想实现双击元素时，切换元素，显示出input框，输入新title，失去焦点再切换回去

<div @dblclick="editTitle()">
  <span v-if="draggable">{{ title }}</span>
  <el-input
    v-else
    @blur="loseFocus()"
    v-model.trim="titleText"
    maxlength="20"
    size="small"
  />
</div>

可以看到，切换元素后，输入框并没有聚焦，即使加上​​autofocus​​属性

原因
可能页面有多个el-input或已经聚焦有元素

解决办法

// 编辑title
const editTitle = () => {
  _data.draggable = false;
  // 页面渲染完成后，输入框自动聚焦
  nextTick(() => {
    document.querySelector(".el-input__inner").focus();
  });
};
// 失去焦点，切换回原元素
const loseFocus = (title, id) => {
  _data.draggable = true;
};

​​ElementUI的 input 的属性 autofocus(自动获取焦点) 失效​​

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。