element ui 弹出框中input自动聚焦（仅供自己学习记录，侵删）

html：

<el-dialog  title="校园卡"
            append-to-body
            :visible.sync="schoolcard"
            width="700px">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="二维码">
      <el-input v-model="form.name"
                @keyup.enter.native="kdenter"
                ref="inputNum"
                class="inputfocus"></el-input>
    </el-form-item>
    <div class="firstinput">
      姓名：
        <el-input
          v-model="inputxm"
          class="forbidinput inputxm"
          :disabled="true"></el-input>
      学号：
        <el-input
          v-model="inputxh"
          class="forbidinput"
          :disabled="true"></el-input>
    </div>
  </el-form>
</el-dialog>

directives：

directives: {
  focus: {
    // 指令的定义
    inserted: (el) => {
      // 聚焦元素
      el.querySelector('input').focus()
      // el.focus()
    }
  }
}

watch:

watch:{
      schoolcard(newVal, oldVal) {
        // console.log(newVal)
        if (newVal === true) {
          this.$nextTick(() => {
            // 自动获取焦点 element组件autofocus失效
            this.$refs.inputNum.focus()
            this.$refs.inputNum.$el.querySelector('input').focus()
          })
        }
      }
    },

ps:没有监听事件聚焦功能只能实现一次