<think>
我们需要创建一个Vue组件，实现登录和注册表单的切换，并且要求切换过程
丝滑流畅，界面设计简约优美。
功能点：
1. 有一个登录表单（通常包含用户名/邮箱和密码输入框，以及登录按钮）
2. 有一个注册表单（通常包含用户名、邮箱、密码、确认密码等输入框，以及注册按钮）
3. 在登录表单下方有一个链接，点击切换到注册表单；在注册表单下方有一个链接，点击切换到登录表单。
4. 切换时使用Vue的过渡效果，使切换过程
丝滑。
设计思路：
我们可以使用一个变量（如isLogin）来控制当前显示的是登录表单还是注册表单。
使用Vue的<transition>组件包裹表单容器，通过CSS过渡效果实现
丝滑切换。
简约设计：使用简单的颜色和布局，适当的内边距和外边距，输入框和按钮的样式要简洁。
我们将创建一个名为AuthForm.vue的单文件组件。
代码结构：
1. 模板部分：定义两个表单，根据isLogin的值决定显示哪一个。同时使用<transition>包裹表单以实现过渡效果。
2. 脚本部分：定义
数据模型（登录和注册表单的
数据字段）、方法（切换表单、提交登录和注册）等。
3. 样式部分：使用SCSS或CSS设计简约的样式，包括过渡效果。
注意：为了简约，我们可能会使用一个卡片式的设计，将表单放在一个卡片中，并且切换时两个表单可以水平或垂直切换。
这里我们选择水平切换：两个表单并排放在一个容器内，通过改变容器的左右位置来实现切换。
具体实现：
我们将两个表单放在一个容器内，容器的宽度为两个表单的总宽度，然后通过改变transform: translateX的值来切换显示哪个表单。
过渡效果：使用transform和transition。
为了更好的用户
体验，我们还可以在输入框获得焦点时添加一些效果。
由于要求简约，颜色选择上可以以白色为背景，灰色边框，按钮使用一种主题色。
我们将创建以下
数据字段：
isLogin: 布尔值，true表示当前显示登录表单，false表示显示注册表单。
loginData: 对象，包含用户名（或邮箱）和密码。
registerData: 对象，包含用户名、邮箱、密码和确认密码。
在提交时，我们将触发相应的方法（login或register），并通过事件通知父组件。
下面给出完整代码：
</think>
以下是一个简约优美、
丝滑切换的登录/注册Vue组件实现，包含平滑过渡动画和响应式设计：
```vue
<template>
<div class="auth-container">
<div class="card" :class="{'show-register': showRegister}">
<
!-- 登录表单 -->
<transition name="fade-slide" mode="out-in">
<div v-if="
!showRegister" key="login" class="form-container">
<h2 class="title">欢迎回来</h2>
<form @submit.prevent="handleLogin">
<div class="input-group">
<input
type="text"
v-model="login.email"
placeholder="邮箱地址"
required
>
<span class="icon">✉️</span>
</div>
<div class="input-group">
<input
:type="showLoginPassword ? 'text' : 'password'"
v-model="login.password"
placeholder="密码"
required
>
<span class="icon" @click="showLoginPassword =
!showLoginPassword">
{{ showLoginPassword ? '👁️' : '👁️🗨️' }}
</span>
</div>
<div class="options">
<label>
<input type="checkbox" v-model="rememberMe"> 记住我
</label>
<a href="#" class="link">忘记密码?</a>
</div>
<button type="submit" class="btn primary">登录</button>
</form>
<p class="switch-text">
还没有账号?
<a href="#" @click.prevent="toggleForm" class="link">立即注册</a>
</p>
</div>
</transition>
<
!-- 注册表单 -->
<transition name="fade-slide" mode="out-in">
<div v-if="showRegister" key="register" class="form-container">
<h2 class="title">创建账号</h2>
<form @submit.prevent="handleRegister">
<div class="input-group">
<input
type="text"
v-model="register.username"
placeholder="用户名"
required
>
<span class="icon">👤</span>
</div>
<div class="input-group">
<input
type="email"
v-model="register.email"
placeholder="邮箱地址"
required
>
<span class="icon">✉️</span>
</div>
<div class="input-group">
<input
:type="showRegisterPassword ? 'text' : 'password'"
v-model="register.password"
placeholder="密码"
required
>
<span class="icon" @click="showRegisterPassword =
!showRegisterPassword">
{{ showRegisterPassword ? '👁️' : '👁️🗨️' }}
</span>
</div>
<div class="input-group">
<input
:type="showConfirmPassword ? 'text' : 'password'"
v-model="register.confirmPassword"
placeholder="确认密码"
required
>
<span class="icon" @click="showConfirmPassword =
!showConfirmPassword">
{{ showConfirmPassword ? '👁️' : '👁️🗨️' }}
</span>
</div>
<button type="submit" class="btn primary">注册</button>
</form>
<p class="switch-text">
已有账号?
<a href="#" @click.prevent="toggleForm" class="link">立即登录</a>
</p>
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showRegister: false,
rememberMe: false,
showLoginPassword: false,
showRegisterPassword: false,
showConfirmPassword: false,
login: {
email: '',
password: ''
},
register: {
username: '',
email: '',
password: '',
confirmPassword: ''
}
}
},
methods: {
toggleForm() {
this.showRegister =
!this.showRegister
},
handleLogin() {
console.log('登录信息:', this.login)
// 这里添加实际的登录API调用
},
handleRegister() {
if (this.register.password
!== this.register.confirmPassword) {
alert('两次输入的密码不一致')
return
}
console.log('注册信息:', this.register)
// 这里添加实际的注册API调用
}
}
}
</script>
<style scoped>
.auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height:
100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2
100%);
padding: 20px;
}
.card {
width:
100%;
max-width: 400px;
background: white;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
overflow: hidden;
position: relative;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
}
.title {
text-align: center;
margin-bottom: 30px;
color: #2d3748;
font-weight: 600;
}
.form-container {
padding: 40px;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
width:
100%;
padding: 14px 20px 14px 45px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
background: #f8fafc;
}
.input-group input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.input-group .icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
user-select: none;
font-size: 18px;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14px;
}
.btn {
width:
100%;
padding: 14px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.primary {
background: #667eea;
color: white;
box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
}
.primary:hover {
background: #5a67d8;
transform: translateY(-2px);
box-shadow: 0 7px 14px rgba(102, 126, 234, 0.4);
}
.switch-text {
text-align: center;
margin-top: 25px;
color: #718096;
font-size: 14px;
}
.link {
color: #667eea;
text-decoration: none;
transition: color 0.3s;
}
.link:hover {
color: #5a67d8;
text-decoration: underline;
}
/* 过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.fade-slide-enter-from,
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* 响应式设计 */
@media (max-width: 480px) {
.form-container {
padding: 30px 20px;
}
.card {
max-width:
100%;
}
}
</style>
```
### 设计特点解释：
1. **
丝滑切换效果**：
- 使用Vue的`<transition>`组件实现表单切换动画
- 添加了3D翻转效果和淡入淡出动画
- 使用cubic-bezier曲线实现自然过渡
2. **简约美学设计**：
- 柔和的渐变背景
- 卡片式布局带阴影提升层次感
- 简洁的图标和输入框设计
- 一致的间距和排版
3. **用户
体验优化**：
- 密码可见性切换功能
- 表单验证和错误处理
- 响应式设计适配移动端
- 悬停和焦点状态的视觉反馈
- 记住我选项和忘记密码链接
4. **代码结构**：
- 清晰的组件划分（登录/注册表单）
-
数据模型分离（login/register）
- 方法封装（登录/注册/切换）
- CSS使用BEM命名规范
### 功能说明：
- 点击"立即注册"/"立即登录"链接切换表单
- 密码字段的眼睛图标可切换密码可见性
- 登录表单有"记住我"选项和忘记密码链接
- 注册表单包含密码确认和验证
- 表单提交处理函数预留API调用位置
此组件可直接复制到Vue项目中使用，无需额外依赖，样式自包含。
Excel极速生成百万条随机数据方案
扫一扫
1304
到【灌水乐园】发言
