vue中input等元素动态获得与失去焦点

需求场景

点击文字（值），进入修改流程显示已获得焦点的输入框，输入框失焦自动保存修改后的值

方案

查了网上的一些元素获得焦点的方式大致如下：

1. 原生js操作dom： document.getElementById('inputId').focus()

2. ref方式实现： this.$refs.id.focus()

3. 自定义指令（全局或者组件局部看自己情况）

试验后最终使用第三种，比较合适使用场景。

以局部为例：

<el-input v-focus />

    directives: { 
      focus: {
        // 指令的定义 (以下代码根据自己情况改写)
        inserted: function (el, { value }) {
          if (value) {
            const dom = 
              el.querySelector('input') ||
              el.querySelector('textarea')
            dom.focus()
          }
        }
      }
    }

特别说明：例子中inserted是指元素插入到dom中时，获得焦点，如果你的元素不是用v-if控制，需要改为updated。