您现在的位置是：首页 >其他 >模仿风宇博客登录蒙层弹窗（vuex+computed实现）网站首页其他
模仿风宇博客登录蒙层弹窗（vuex+computed实现）
简介模仿风宇博客登录蒙层弹窗（vuex+computed实现）
效果图
- 使用了动态组件做组件切换
- 使用vue内置的transition组件实现过渡效果，蒙层 和 弹框 都使用了transition，并嵌套
- vuex + computed计算属性，实现数据 和 方法共享，让其它组件也能够控制到登录弹框
- 蒙层使用了固定定位
- 未实现：鼠标滚轮在蒙层上面滚动时，蒙层下面的页面也会滚动。但是，我不想使用body，overflow:hidden，这种方式，这样右侧的滚动条就会消失掉，还没找到方法。（已解决：参考-蒙层禁止页面滚动）
- 未实现：页面会立即回到顶部（已解决：参考-蒙层禁止页面滚动））
- 与原博客中有差异，我的是弹出来后，下面的页面静止不动了，仍然有滚动条，但滚动条里的滑块没了
- 有其他定位相关的问题，影响了其它页面布局
-
试了下，把这个问题解决了，只要给body加上width:100%，就解决了全部的问题（1. 有轻微的抖动，2. 其它页面的布局被搞乱了）
-
最终的效果图如下（以下代码是最新代码）：
-
代码
App.vue
- 直接将Login这个组件，放入App.vue中，而Login组件使用固定定位，覆盖掉整个视口，然后，使用flex布局，让弹窗内容在中间。
<template>
<div id="app">
<router-view/>
<Login/>
<Search/>
</div>
</template>
<script>
import Login from '@/components/model/Login.vue';
import Search from '@/components/model/Search.vue';
export default {
name:'App',
data() {
return {
}
},
components: {
Login,
Search
}
}
</script>
<style lang="scss">
@import url(//at.alicdn.com/t/c/font_4004562_pw9b9ygx6n.css);
body {
margin: 0;
/* 不管什么情况，都特么给老子出现滚动条 */
overflow-y: scroll !important;
overflow-x: hidden;
/* 这个100%很重要 */
width: 100%;
/* 背景渐变 */
background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
}
.shadow {
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}
/* 整个滚动条 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条上的滚动滑块,参考： 滚动条样式修改->https://blog.csdn.net/coder_jxd/article/details/124213962 */
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
/* 关键代码 */
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent);
border-radius: 32px;
}
/* 滚动条样式，参考： */
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #dbeffd;
border-radius: 32px;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
</style>
store/index.js
- loginShow控制最外面的蒙层的v-show（即display:none）
- componentName控制动态组件切换的组件名
- loginShow 和 componentName都存到vuex中，提供方法入口给外界，去修改这两个值
- 这两个值，会被Login组件使用，控制展示蒙层 和 切换的动态组件
import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
loginShow: false,
componentName: '',
scrollTop1:0
},
getters: {
},
mutations: {
updateComponentName(state, val) {
state.componentName = val
},
updateLoginShow(state, val) {
state.loginShow = val
},
showComponentName(state,componentName){
/* 记录此时的滚动距离 */
let documentTop = document.scrollingElement.scrollTop;
state.scrollTop1 = documentTop
/* 调用其它mutation中的方法 */
this.commit('updateComponentName',componentName)
this.commit('updateLoginShow',true)
/* 保持滚动距离 */
this._vm.$nextTick(()=>{
document.body.style.position = "fixed"
document.body.style.top = -state.scrollTop1 + "px";
})
}
},
actions: {
},
modules: {
}
})
Login.vue
- 给 蒙层（使用了v-show，支持过渡） 和 动态组件（动态组件支持过渡） 添加过渡样式
- 使用 计算属性 配合使用 vuex
- 点击蒙层时，调用vuex提供的方法，修改store中的值，然后，计算属性接收到修改的值，从而更新渲染（动态组件消失，蒙层隐藏）
<style lang="scss">
.body-mask {
position: fixed;
background-color: rgba(0, 0, 0, .3);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.mask-content {
max-height: 90%;
width: 460px;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
border-radius: 6px;
padding: 40px 30px 10px;
}
/* 蒙层的动画 */
.mask-enter,
.mask-leave-to {
opacity: 0;
}
.mask-enter-to,
.mask-leave {
opacity: 1;
}
.mask-enter-active,
.mask-leave-active {
transition: all 0.2s;
}
/* 蒙层中的组件切换的动画 */
.v-enter,
.v-leave-to {
transform: scale(0.8);
opacity: 0;
}
.v-enter-to,
.v-leave {
transform: scale(1);
opacity: 1;
}
.v-enter-active,
.v-leave-active {
transition: all 0.2s;
}
</style>
<template>
<transition name="mask">
<div class="body-mask" v-show="loginShow" ref="bodyMask">
<transition appear mode="out-in">
<component :is="componentName" />
</transition>
</div>
</transition>
</template>
<script>
import LoginBox from '@/components/model/LoginBox'
import RegisterBox from '@/components/model/RegisterBox'
import ForgetPwd from '@/components/model/ForgetPwd'
export default {
name: 'Login',
data() {
return {
}
},
computed: {
componentName: {
get() {
return this.$store.state.componentName
}
},
loginShow: {
get() {
return this.$store.state.loginShow
}
}
},
mounted() {
this.$refs['bodyMask'].onclick = (e) => {
if (e.target === this.$refs['bodyMask']) {
this.$store.commit('updateComponentName', '')
this.$store.commit('updateLoginShow', false)
/* 恢复之前的滚动距离 */
this.$nextTick(()=>{
document.body.style.position = "static";
document.body.style.top = "auto";
/* 始终保留右边的滚动条 */
document.body.style.overflowY = 'scroll'
document.scrollingElement.scrollTop = this.$store.state.scrollTop1;
})
}
}
},
methods: {
},
components: {
LoginBox,
RegisterBox,
ForgetPwd
}
}
</script>
LoginBox.vue
直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新）
<style lang="scss" scoped>
.mask-content {
max-height: 90%;
width: 460px;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
border-radius: 6px;
// box-sizing: border-box;
padding: 40px 30px 10px;
}
input {
border: none;
outline: none;
border-bottom: 1px solid #9e9e9e;
padding: 5px 0;
width: 100%;
font-size: 16px;
&::placeholder {
color: #9f9f9f;
}
}
.form-item {
margin-bottom: 40px;
&:last-child {
margin-bottom: 15px;
}
}
.form-item-name {
color: #696969;
font-size: 13px;
margin-bottom: 2px;
}
button {
border:none;
cursor: pointer;
background-color: #2196f3;
color: #fff;
width: 100%;
font-size: 16px;
padding: 8px;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
}
.entrance-tip {
font-size: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.entrance-social {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
&::before {
content: '';
display: block;
position: absolute;
height: 1px;
background-color: #d8d8d8;
width: 60%;
}
span {
position: absolute;
font-size: 13px;
color: #b5b5b5;
z-index: 10;
background-color: #fff;
padding: 0 10px;
}
}
.social-login {
display: flex;
justify-content: center;
}
span.iconfont {
cursor: pointer;
margin: 0 8px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-size: 18px;
&.icon-weibo {
background-color: #e05244;
}
&.icon-qq {
background-color: #00aaee;
}
}
</style>
<template>
<div class="mask-content ">
<div class="form-item">
<div class="form-item-name">邮箱号</div>
<input placeholder="请输入您的邮箱"/>
</div>
<div class="form-item">
<div class="form-item-name">密码</div>
<input placeholder="请输入您的密码"/>
</div>
<div class="form-item">
<button>登录</button>
</div>
<div class="form-item">
<div class="entrance-tip">
<a href="#" @click="changeComponent('RegisterBox')">立即注册</a>
<a href="#" @click="changeComponent('ForgetPwd')">忘记密码?</a>
</div>
</div>
<div class="form-item">
<div class="entrance-social">
<span>社交账号登录</span>
</div>
</div>
<div class="form-item">
<div class="social-login">
<span class="iconfont icon-weibo"></span>
<span class="iconfont icon-qq"></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LoginBox',
methods: {
changeComponent(name) {
this.$store.commit('updateComponentName',name)
}
},
components: {
}
}
</script>
RegisterBox.vue
直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新）
<style lang="scss">
.mask-content {
max-height: 90%;
width: 460px;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
border-radius: 6px;
// box-sizing: border-box;
padding: 40px 30px 10px;
}
input {
border: none;
outline: none;
border-bottom: 1px solid #9e9e9e;
padding: 5px 0;
width: 100%;
font-size: 16px;
&::placeholder {
color: #9f9f9f;
}
}
.form-item {
margin-bottom: 40px;
&:last-child {
margin-bottom: 15px;
}
}
.form-item-name {
color: #696969;
font-size: 13px;
margin-bottom: 2px;
}
button {
border: none;
cursor: pointer;
background-color: #f44336;
color: #fff;
width: 100%;
font-size: 16px;
padding: 8px;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
}
.entrance-tip {
font-size: 15px;
align-items: center;
font-size: 14px;
color: #333333;
span {
margin-right: 5px;
}
}
.entrance-social {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
&::before {
content: '';
display: block;
position: absolute;
height: 1px;
background-color: #d8d8d8;
width: 60%;
}
span {
position: absolute;
font-size: 13px;
color: #b5b5b5;
z-index: 10;
background-color: #fff;
padding: 0 10px;
}
}
.social-login {
display: flex;
justify-content: center;
}
span.iconfont {
cursor: pointer;
margin: 0 8px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-size: 18px;
&.icon-weibo {
background-color: #e05244;
}
&.icon-qq {
background-color: #00aaee;
}
}
.check-code {
display: flex;
a {
word-break: keep-all;
padding: 5px 10px;
color: #bdbdbd;
/* padding-left: 10px; */
font-size: 13px;
}
}
</style>
<template>
<div class="mask-content">
<div class="form-item">
<div class="form-item-name">邮箱号</div>
<input placeholder="请输入您的邮箱" />
</div>
<div class="form-item">
<div class="form-item-name">验证码</div>
<div class="check-code">
<input placeholder="请输入位数验证码" />
<a href="#">发送</a>
</div>
</div>
<div class="form-item">
<div class="form-item-name">密码</div>
<input placeholder="请输入您的密码" />
</div>
<div class="form-item">
<button>注册</button>
</div>
<div class="form-item">
<div class="entrance-tip">
<span>已有账号?</span>
<a href="#" @click="changeComponent('LoginBox')">登录</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'RegisterBox',
methods: {
changeComponent(name) {
this.$store.commit('updateComponentName',name)
}
},
components: {
}
}
</script>
ForgetPwd.vue
直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新）
<style lang="scss">
.mask-content {
max-height: 90%;
width: 460px;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
border-radius: 6px;
// box-sizing: border-box;
padding: 40px 30px 10px;
}
input {
border: none;
outline: none;
border-bottom: 1px solid #9e9e9e;
padding: 5px 0;
width: 100%;
font-size: 16px;
&::placeholder {
color: #9f9f9f;
}
}
.form-item {
margin-bottom: 40px;
&:last-child {
margin-bottom: 15px;
}
}
.form-item-name {
color: #696969;
font-size: 13px;
margin-bottom: 2px;
}
button {
border: none;
cursor: pointer;
background-color: #4caf50;
color: #fff;
width: 100%;
font-size: 16px;
padding: 8px;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
}
.entrance-tip {
font-size: 15px;
align-items: center;
font-size: 14px;
color: #333333;
span {
margin-right: 5px;
}
}
.entrance-social {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
&::before {
content: '';
display: block;
position: absolute;
height: 1px;
background-color: #d8d8d8;
width: 60%;
}
span {
position: absolute;
font-size: 13px;
color: #b5b5b5;
z-index: 10;
background-color: #fff;
padding: 0 10px;
}
}
.social-login {
display: flex;
justify-content: center;
}
span.iconfont {
cursor: pointer;
margin: 0 8px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-size: 18px;
&.icon-weibo {
background-color: #e05244;
}
&.icon-qq {
background-color: #00aaee;
}
}
.check-code {
display: flex;
a {
word-break: keep-all;
padding: 5px 10px;
color: #bdbdbd;
/* padding-left: 10px; */
font-size: 13px;
}
}
</style>
<template>
<div class="mask-content ">
<div class="form-item">
<div class="form-item-name">邮箱号</div>
<input placeholder="请输入您的邮箱" />
</div>
<div class="form-item">
<div class="form-item-name">验证码</div>
<div class="check-code">
<input placeholder="请输入位数验证码" />
<a href="#">发送</a>
</div>
</div>
<div class="form-item">
<div class="form-item-name">密码</div>
<input placeholder="请输入您的密码" />
</div>
<div class="form-item">
<button>确定</button>
</div>
<div class="form-item">
<div class="entrance-tip">
<span>已有账号?</span>
<a href="#" @click="changeComponent('LoginBox')">登录</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ForgetPwd',
methods: {
changeComponent(name) {
this.$store.commit('updateComponentName',name)
}
},
components: {
}
}
</script>
NavBar.vue
直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新，并展示蒙层）
<li>
<a class="menu-a" href="#">
<i class="iconfont icon-denglu"></i>
<span @click="$store.commit('showComponentName', 'LoginBox')">登录</span>
</a>
</li>
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。
站长推荐
- U8W/U8W-Mini使用与常见问题解决
U8W/U8W-Mini使用与常见问题解决 - stm32使用HAL库配置串口中断收发数据（保姆级教程）
stm32使用HAL库配置串口中断收发数据（保姆级教程） - SpringSecurity实现前后端分离认证授权
SpringSecurity实现前后端分离认证授权 - 【社区图书馆】伴我前行的一本书《The C Programming Language》
【社区图书馆】伴我前行的一本书《The C Programming Language》 - 分享几个国内免费的ChatGPT镜像网址(亲测有效)
分享几个国内免费的ChatGPT镜像网址(亲测有效)