vue 实现简单登陆
以下是一个使用 Vue 3 实现的简单登录功能示例，包含表单验证和基础交互逻辑：
创建 Vue 组件
<template>
<div class="login-container">
<h3>用户登录</h3>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
@blur="validateField('username')"
/>
<span class="error" v-if="errors.username">{{ errors.username }}</span>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="form.password"
@blur="validateField('password')"
/>
<span class="error" v-if="errors.password">{{ errors.password }}</span>
</div>
<button type="submit" :disabled="isSubmitting">
{{ isSubmitting ? '登录中...' : '登录' }}
</button>
</form>
</div>
</template>脚本部分
<script>
import { reactive, ref } from 'vue'
export default {
setup() {
const form = reactive({
username: '',
password: ''
})
const errors = reactive({
username: '',
password: ''
})
const isSubmitting = ref(false)
const validateField = (field) => {
if (field === 'username' && !form.username.trim()) {
errors.username = '请输入用户名'
} else if (field === 'password' && !form.password.trim()) {
errors.password = '请输入密码'
} else {
errors[field] = ''
}
}
const handleSubmit = () => {
validateField('username')
validateField('password')
if (!errors.username && !errors.password) {
isSubmitting.value = true
// 模拟API调用
setTimeout(() => {
alert(`登录成功，欢迎 ${form.username}`)
isSubmitting.value = false
}, 1000)
}
}
return {
form,
errors,
isSubmitting,
validateField,
handleSubmit
}
}
}
</script>样式部分
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #42b983;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.error {
color: red;
font-size: 12px;
display: block;
margin-top: 5px;
}
</style>功能说明
- 使用 Vue 3 的 Composition API 编写
- 包含基本的表单验证逻辑
- 提交时禁用按钮防止重复提交
- 模拟异步登录请求
- 使用 scoped 样式确保样式隔离
扩展建议
- 可以添加记住密码功能
- 实现与后端 API 的真实对接
- 增加验证码功能
- 使用 Vue Router 实现登录后跳转
这个示例可以直接复制到 Vue 项目中使用，需要确保项目基于 Vue 3 环境。
