前言
项目中基本上都会用到灰色模态框,最基本的就是登陆登出界面,本文会从最简单的一个遮罩组件做起。
效果图
实现步骤
1.实现html和css样式
2.子组件的vue代码
3.父组件的vue代码
1.实现html和css样式
html如下
<div class="modal" v-show="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal">
<solt></solt>
<Icon type="md-close" @click="closeMyself"/>
</div>
</div>
</div>
</div>
CSS如下
<style lang="stylus" scopced>
.modal
display flex
align-items center
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
outline: 0;
&:before
content: "";
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #171e26;
opacity: .9;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
.modal-dialog
width: auto;
margin: 0 auto;
transform: none;
position: relative;
.modal-content
border-radius: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
background-color: transparent;
min-height: 380px;
position: relative;
background-clip: padding-box;
.close-modal
position: fixed;
right: 45px;
top: 35px;
border-radius: 30px;
padding: 12px 12px;
color: hsla(0,0%,100%,.9);
background-color: hsla(0,0%,100%,.25);
transition: all .4s;
&:hover
background hsla(0,0%,100%,.35)
cursor pointer
i
font-size 20px
</style>
2.子组件的vue代码
props:{
showModal: {
default: true,
type: Boolean,
required: true
}
},
methods: {
closeMyself() {
this.$emit("on-close")
}
}
3.父组件的vue代码
<modal-window :showModal="showModal" @on-close="closeDialog"></modal-window>
data() {
return {
showModal: false,//遮罩面板
}
closeDialog() {
this.showModal = false
}