代码拉取完成,页面将自动刷新
同步操作将从 陌溪/LearningNotes 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
今天在蘑菇博客登录的时候,就发现一个问题,因为在input绑定了键盘事件,按回车的时候就触发登录事件,但是因为Chrome会自动保存密码,所以也就说第一次登录的时候才会输入账号和密码
我们按回车事件后,就会触发对应的方法
其实解决的方案也比较简单,就是需要我们在进入登录页面的时候,input框自动聚焦,然后我们按回车事件后,就会触发对应的方法
关于input自动聚焦的思路:
<el-input
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 => {
this.$refs.userNameInput.focus()
})
},
created() {
this.inputFocus()
},
这样每次加载登录页面的时候,就会自动对input框进行聚焦了,然后只需要按下回车,即可登录到后台系统~
因为我们都知道,vue的钩子函数created,在调用的时候,Dom还没有进行任何渲染,如果我们直接执行
this.$refs.userNameInput.focus()
这个代码的话,是没有效果的,因此需要使用this.$nextTick(),将它延迟到下次Dom渲染的时候执行
但是如果我们在mounted钩子函数执行的话,因为当mounted钩子函数执行的时候,Dom树已经渲染完毕了,那么就可以直接获取对应的dom进行渲染,也就不需要使用this.$nextTick()方法了,因此我们还可以直接这样写
mounted() {
this.$refs.userNameInput.focus()
},
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。