vue3 数据驾驶舱登录页
使用wowjs添加入场动画
宽高自适应
监听回车登录
演示地址
代码风格
vue3+vite+js
vue3 数据驾驶舱登录页 截图
动态效果
部分代码
<div class="loginPage">
<div class="loginPageMain">
<div class="loginMainTitle">
<p>数据可视化大屏登录</p>
</div>
<div class="loginPageMainInner wow fadeInDown">
<div class="loginPageMainInner2">
<div class="loginTitle wow flipInX" data-wow-delay="0.8s">用户登录</div>
<div class="info wow fadeInLeft" data-wow-delay="1.5s">
<div class="icon">
<img src="./assets/icon_user.png" alt="">
</div>
<input v-model="uname" type="text" placeholder="请输入用户名">
</div>
<div class="info mt30 wow fadeInRight" data-wow-delay="1.8s">
<div class="icon">
<img src="./assets/icon_password.png" alt="">
</div>
<input v-model="passwd" type="password" placeholder="请输入密码">
</div>
<div class="remember wow fadeInUp" data-wow-delay="2.1s">
<div class="rememberl">
<rememberPwd ref="rememberPwd" v-model:password="passwd" v-model:username="uname"></rememberPwd>
</div>
<div class="forget" @click="getForget">忘记密码？</div>
</div>
<div class="loginBut cur wow fadeInUp" data-wow-delay="2.1s" @click="login">
登 录
</div>
</div>
</div>
</div>
<securityQuestion ref="securityQuestion"></securityQuestion>
</div>
更新日志
2023年09月27日 v1.2
回车触发登录组件封装
2023年08月08日 v1.1
记住密码功能缓存加密处理
添加mockjs模拟接口交互实现登录 账号 wanjunshijie 密码 123456
async handleLogin() {
// 检查用户名和密码是否已被输入
if (!this.username || !this.password) {
// 如果没有输入用户名或密码，显示错误消息并退出函数
ElMessage.error('请输入用户名和密码');
return;
}
try {
// 使用用户输入的用户名和密码调用登录 API
const response = await login({username: this.username, password: this.password});
// 检查返回的响应码
console.log(response.code)
if (response.code === 1) {
// 记住密码
this.$refs.rememberPwd.rememberPassword();
// 登录成功，重定向到主页
ElMessage({
message: '登录成功',
type: 'success',
})
} else {
// 登录失败，显示错误消息
ElMessage.error(response.message);
}
} catch (error) {
console.log(error)
// 发生错误，显示错误消息
ElMessage.error('登录失败，请检查网络连接');
}
}
