最近 和移动端打交道比较多 用到的弹窗也比较多 索性自己写个组件以后能用到组件在文章最后，话不多说先上图片
微信截图_20220104191336.png
弹窗功能如下
- 插槽
- 禁止主页面滚动
- 动画渐入渐出
- 动态设置高度
- 点击蒙层关闭弹窗
待做功能
- 动态设置方向 （目前只支持自下向上）
用法
<span @click="open"></span>
<span @click="close"></span>
// 组件 height 类型 String
<dialog ref="dialogs" heights="60" ><span>插槽</span></dialog>
open(){
// 打开弹窗方法
this.$refs.dialogs.open()
}
close(){
// 关闭弹窗方法
this.$refs.dialogs.close()
}
dialog 组件内容 如果想用途中底部出现的 复制引用即可 不需要改动组件
<template>
<div :class="show1 ? 'big' : 'bigs'" v-show="show">
<div class="top" @click="close"></div>
<div :style="{ height: heights + '%' }" :class="show1 ? 'con' : 'cons'">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
heights: {
type: String,
default: "50",
},
},
data() {
return {
show: false,
show1: false,
};
},
methods: {
open() {
this.show = true;
this.show1 = true;
document.body.style.position = "fixed";
document.body.style.width = "100%";
document.body.style.height = "100%";
},
close() {
document.body.style.position = "static";
document.body.style.height = "auto";
var _this = this;
this.show1 = false;
setTimeout(function () {
_this.show = false;
}, 360);
},
},
};
</script>
<style lang="less" scoped>
.big {
width: 100%;
height: 100%;
position: fixed;
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
}
.top {
flex: 1;
}
.con {
width: 100%;
background: #fff;
animation: FadeIn 0.4s 1;
position: fixed;
z-index: 99999;
bottom: 0;
left: 0;
}
@keyframes FadeIn {
0% {
bottom: -50%;
}
100% {
bottom: 0;
}
}
.cons {
width: 100%;
background: #fff;
animation: FadeOut 0.4s 1;
position: fixed;
z-index: 99999;
bottom: 0;
left: 0;
}
@keyframes FadeOut {
0% {
bottom: 0;
}
100% {
bottom: -100%;
}
}
</style>
