input自动聚焦

一、让 input 自动聚焦

html如下

<Input  ref="inputdata"   v-model="code"  />

在Dom完成后

created() {
  this.$nextTick(() => {
     this.$refs.inputdata.focus()
  })
},

以上注意：

发现是更新dom先后顺序的问题，在vue中，并不是每次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。

通常情况下，我们不需要关心这个问题，而如果想在DOM状态更新后做点什么，则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

二、让弹窗中的 input 自动聚焦

还有一种就是弹窗的问题，打开弹框第一次能自动获取焦点（加了autofocus的缘故，但只有第一次进入才起作用），然而关闭弹窗再次进入，光标并没有再次聚焦，还是可以利用 $nextTick，设置100毫秒的延时执行即可。

this.$nextTick(() => {
  this.$refs.gain.focus()
},100)