用vue3写一个PC端的登录页,包含账号密码短信验证码的功能
时间: 2024-04-23 15:24:48 浏览: 18
好的,以下是一个简单的PC端登录页的Vue3代码示例,包含账号密码和短信验证码的功能:
```html
<template>
<div class="login-container">
<h1 class="title">用户登录</h1>
<form class="login-form">
<label>
<input type="text" v-model="username" placeholder="请输入账号" />
</label>
<label>
<input type="password" v-model="password" placeholder="请输入密码" />
</label>
<label>
<input type="text" v-model="smsCode" placeholder="请输入短信验证码" />
<button type="button" @click="sendSmsCode" :disabled="sendingSmsCode">{{ smsCodeBtnText }}</button>
</label>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
username: '',
password: '',
smsCode: '',
sendingSmsCode: false,
smsCodeBtnText: '获取验证码',
smsCodeTimeoutId: null,
});
const sendSmsCode = () => {
// TODO: 发送短信验证码的逻辑
if (state.sendingSmsCode) return;
state.sendingSmsCode = true;
state.smsCodeBtnText = '发送中...';
setTimeout(() => {
state.sendingSmsCode = false;
state.smsCodeBtnText = '重新获取验证码';
}, 3000);
};
const login = () => {
// TODO: 登录的逻辑
console.log(state.username, state.password, state.smsCode);
};
return {
...state,
sendSmsCode,
login,
};
},
};
</script>
<style>
.login-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
text-align: center;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
display: flex;
align-items: center;
margin: 20px 0;
}
input[type='text'],
input[type='password'] {
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
margin-left: 10px;
}
button[type='submit'],
button[type='button'] {
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #0078d7;
color: #fff;
cursor: pointer;
}
button[type='button']:disabled {
cursor: default;
background-color: #ccc;
}
</style>
```
在这个示例中,我们使用Vue3的Composition API来编写组件逻辑。我们使用了`reactive`函数来创建一个响应式的数据对象,其中包含了账号、密码、短信验证码等数据,以及一些状态标志和相关方法。我们使用了`v-model`指令来双向绑定输入框的值,使用`@click`指令来绑定点击事件,使用`{{ }}`语法来插入动态文本。在发送短信验证码的按钮上,我们使用了`:disabled`指令来动态禁用按钮,使用了`setTimeout`函数来模拟发送短信验证码的过程。在登录按钮上,我们使用了`.prevent`修饰符来阻止表单默认提交行为,使用了`console.log`函数来打印输入框的值。最后,我们使用了一些CSS来美化登录页的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)