前言#

在日常开发中，我们经常需要让某个输入框在页面加载后自动获得焦点，以提高用户体验，该怎么实现呢？

解决方案#

其实解决的方案也比较简单，就是需要我们在进入登录页面的时候，input框自动聚焦，然后我们按回车事件后，就会触发对应的方法

关于input自动聚焦的思路：

• 给需要聚焦的input设置ref

1
        <el-input
2
          v-model="loginForm.username"
3
          ref="userNameInput"
4
          name="username"
5
          type="text"
6
          auto-complete="on"
7
          placeholder="username"
8
          @keyup.enter.native="handleLogin"
9
        />

• 创建一个聚焦的方法

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新

1
    inputFocus: function() {
2
      this.$nextTick(x => {
3
        this.$refs.userNameInput.focus()
4
      })
5
    },

• 在create方法中调用

1
  created() {
2
    this.inputFocus()
3
  },

这样每次加载登录页面的时候，就会自动对input框进行聚焦了，然后只需要按下回车，即可登录到后台系统~

因为我们都知道，vue的钩子函数created，在调用的时候，Dom还没有进行任何渲染，如果我们直接执行

1
this.$refs.userNameInput.focus()

这个代码的话，是没有效果的，因此需要使用this.$nextTick()，将它延迟到下次Dom渲染的时候执行

但是如果我们在mounted钩子函数执行的话，因为当mounted钩子函数执行的时候，Dom树已经渲染完毕了，那么就可以直接获取对应的dom进行渲染，也就不需要使用this.$nextTick()方法了，因此我们还可以直接这样写

1
  mounted() {
2
    this.$refs.userNameInput.focus()
3
  },