el-input如何使用focus方法Cannot read property ‘focus‘ of undefined

今天在做vue项目的时候想使用input的自动对焦，但是一直无法实现，最后看了好多网上的教程，忙碌了好一会儿才解决

<el-dialog
      title="提示"
      :visible.sync="readCard"
      width="30%"
    >
      <el-input id="readCardFocus" ref="readCardFocus" v-model="readCardNumber" v-focus placeholder="请输入内容" @keyup.enter.native="readCardConfirm"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="readCard = false">取 消</el-button>
        <el-button type="primary" @click="readCard = false">确 定</el-button>
      </span>
    </el-dialog>

main.js

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有变化，如show或者父元素变化可以加延时或判断
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

其中的v-focus是看到网上有人写的自定义标签，起初确实有用的，但是来回点击模态框，发现只有第一次有用

又找了好一会儿，终于解决了，期间也报错了Cannot read property 'focus' of undefined

<el-dialog
      title="提示"
      :visible.sync="readCard"
      width="30%"
    >
      <el-input id="readCardFocus" ref="readCardFocus" v-model="readCardNumber" placeholder="请输入内容" @keyup.enter.native="readCardConfirm"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="readCard = false">取 消</el-button>
        <el-button type="primary" @click="readCard = false">确 定</el-button>
      </span>
    </el-dialog>

readCardModel(row) {
      this.readCard = true
      const _this = this
      setTimeout(function() {
        _this.$refs['readCardFocus'].focus()
      }, 1)
      this.readCardNumber = ''
    }

就是加setTimeout，因为在调用模态框的时候，这个input还没有生成，所以加上延迟调用就解决了