<!--
|
/**
|
* @description 模态框组件
|
* @author shm
|
*/
|
-->
|
<template>
|
<div class="moval-box" :class="visable ? 'modal-box-open' : 'modal-box-close'">
|
<div class="modal-cover" @click="clickCover"></div>
|
<div class="modal-content" :class="visable ? 'modal-content-open' : 'modal-content-close'">
|
<div class="title pos-relative" v-if="title">{{ title }}
|
<img src="~@/assets/images/goodsDetail/modal_close.png" class="common-right-icon close_icon"
|
@click="clickCover" />
|
</div>
|
<slot name="modal-content"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'NewModal',
|
props: {
|
visable: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
mounted () {
|
const { body } = document
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
|
body.style.position = 'fixed'
|
body.style.width = '100%'
|
body.style.top = `-${scrollTop}px`
|
},
|
beforeDestroy () {
|
const { body } = document
|
const { top } = body.style
|
body.style.position = ''
|
body.style.width = ''
|
body.style.top = ''
|
document.body.scrollTop = -parseInt(top, 10)
|
document.documentElement.scrollTop = -parseInt(top, 10)
|
},
|
methods: {
|
clickCover () {
|
this.$emit('close-modal')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.modal-box {
|
max-height: 900px;
|
}
|
.modal-box-open {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
z-index: 100;
|
animation: fade-in 0.5s;
|
|
// transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
|
.modal-cover {
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
}
|
}
|
|
/deep/.title {
|
line-height: 80px;
|
text-align: center;
|
font-weight: 600;
|
font-size: 32px;
|
.close_icon {
|
position: absolute;
|
right: 0;
|
top: 20px;
|
}
|
}
|
|
.modal-box-close {
|
height: 0;
|
padding: 0;
|
}
|
|
.modal-content {
|
width: 100%;
|
background: #fff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
.modal-content-open {
|
border-radius: 20px 20px 0 0;
|
// transition: bottom 1.5s ease-in;
|
// height: 30%;
|
// transform: scaleY(1);
|
// transition: all 0.5s
|
animation: fade-in 0.5s;
|
// transition: height 0.5s;
|
}
|
|
.modal-content-close {
|
height: 0;
|
animation: fade-out 0.5s;
|
padding: 0;
|
// transition: all 1.5s ease-out;
|
// transition: height 0.5s;
|
}
|
|
@keyframes fade-out {
|
0% {
|
opacity: 1;
|
-webkit-transform: translateY(1);
|
transform: translateY(1);
|
}
|
|
100% {
|
opacity: 0;
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes fade-in {
|
0% {
|
opacity: 0;
|
-webkit-transform: translateY(1);
|
transform: translateY(1);
|
}
|
|
100% {
|
opacity: 1;
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
}
|
</style>
|
