.在一些购物网站的页面右上角,经常看到登录/注册的状态切换,请把这一功能封装成组件,并在页面中调用,达到状态的切换效果。显示效果可以参照下图。
时间: 2023-06-11 18:09:05 浏览: 57
好的,我可以为你编写一个简单的登录/注册状态切换组件,以下是示例代码:
```html
<template>
<div class="login-status">
<div v-if="!isLoggedIn" class="login-btn" @click="showLogin = true">
登录
</div>
<div v-else class="logout-btn" @click="logout">
退出登录
</div>
<transition name="fade">
<div v-if="showLogin" class="login-modal">
<div class="close-btn" @click="showLogin = false">X</div>
<h2>登录</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password">
<br>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false,
showLogin: false,
username: '',
password: ''
}
},
methods: {
login() {
// 登录逻辑
// 如果登录成功,将 isLoggedIn 设置为 true
this.isLoggedIn = true
this.showLogin = false
},
logout() {
// 退出登录逻辑
// 将 isLoggedIn 设置为 false
this.isLoggedIn = false
}
}
}
</script>
<style scoped>
.login-status {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
padding: 0 20px;
background-color: #f5f5f5;
}
.login-btn,
.logout-btn {
cursor: pointer;
padding: 8px 16px;
border-radius: 20px;
background-color: #409eff;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
transition: background-color 0.3s;
}
.login-btn:hover,
.logout-btn:hover {
background-color: #66b1ff;
}
.logout-btn {
background-color: #999;
}
.logout-btn:hover {
background-color: #ccc;
}
.login-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 24px;
font-weight: bold;
}
</style>
```
可以通过以下方式在页面中使用该组件:
```html
<template>
<div>
<login-status></login-status>
</div>
</template>
<script>
import LoginStatus from '@/components/LoginStatus.vue'
export default {
components: {
LoginStatus
}
}
</script>
```
该组件包含两个状态:登录和未登录。如果用户未登录,将显示“登录”按钮,点击该按钮将显示登录模态框。如果用户已登录,将显示“退出登录”按钮,点击该按钮将退出登录并返回未登录状态。在登录模态框中,用户可以输入用户名和密码进行登录,登录成功后将设置 `isLoggedIn` 为 true 并隐藏模态框。