vue中弹窗input框聚焦_Vue/Vue中input框自动聚焦/README.md · RaceK/LearningNotes - Gitee.com...

# Vue中input框自动聚焦

## 前言

今天在蘑菇博客登录的时候，就发现一个问题，因为在input绑定了键盘事件，按回车的时候就触发登录事件，但是因为Chrome会自动保存密码，所以也就说第一次登录的时候才会输入账号和密码

我们按回车事件后，就会触发对应的方法

## 解决方案

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

关于input自动聚焦的思路：

- 给需要聚焦的input设置ref

```

v-model="loginForm.username"

ref="userNameInput"

name="username"

type="text"

auto-complete="on"

placeholder="username"

@keyup.enter.native="handleLogin"

/>

```

- 创建一个聚焦的方法

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

```

inputFocus: function() {

this.$nextTick(x => {