使用vue3现实登录注册弹窗
时间: 2023-09-17 16:11:22 浏览: 37
以下是使用Vue3实现登录注册弹窗的示例代码:
```html
<template>
<div class="modal">
<div class="modal-content">
<button class="modal-close" @click="closeModal">X</button>
<div v-if="isLogin">
<h2>Login</h2>
<form @submit.prevent="login">
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="#" @click="switchToRegister">Register here</a></p>
</div>
<div v-else>
<h2>Register</h2>
<form @submit.prevent="register">
<label for="name">Name:</label>
<input type="text" id="name" v-model="name" required>
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="#" @click="switchToLogin">Login here</a></p>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
props: ['isOpen'],
emits: ['update:isOpen'],
setup(props, { emit }) {
const isLogin = ref(true);
const name = ref('');
const email = ref('');
const password = ref('');
const closeModal = () => {
emit('update:isOpen', false);
};
const switchToRegister = () => {
isLogin.value = false;
};
const switchToLogin = () => {
isLogin.value = true;
};
const login = () => {
// Implement login logic here
};
const register = () => {
// Implement register logic here
};
return {
isLogin,
name,
email,
password,
closeModal,
switchToRegister,
switchToLogin,
login,
register,
};
},
};
</script>
<style>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 400px;
max-width: 100%;
position: relative;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
}
</style>
```
以上代码将创建一个模态弹窗,其中包含一个登录表单和一个注册表单,用户可以在这两个表单之间切换。
在模态弹窗中,用户输入其登录凭据或注册信息后,单击“登录”或“注册”按钮将会调用相应的方法,这些方法需要在实际应用中进行实现。