css 实现输入框错误 晃动效果
网上去找个晃动的样式 放到我们 login的 css 文件 style.scss 中:
.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); }
}然我们写一个动态添加晃动样式的函数和check的函数:
shake(elemId) {
let elem = document.getElementById(elemId)
if (elem) {
elem.classList.add('shake')
setTimeout(()=>{ elem.classList.remove('shake') }, 800)
}
},
check() {
if (this.loginForm.username === '') {
this.shake('username')
return false
}
if (this.loginForm.password === '') {
this.shake('password')
return false
}
return true
},我们为我们需要添加样式的元素添加上id:
<!-- 账号输入框组 --> <div id="username" class="input-group"> <!-- 密码输入框组 --> <div id="password" class="input-group">
最后调整我们的验证函数: handleLogin
async handleLogin() {
if (this.check()) {
// 省略...
}
}
0顶
0 踩
共 0 条评论