最近 和移動端打交道比較多 用到的彈窗也比較多 索性自己寫個組件以后能用到組件在文章最后谤草，話不多說先上圖片
微信截圖_20220104191336.png
彈窗功能如下
- 插槽
- 禁止主頁面滾動
- 動畫漸入漸出
- 動態(tài)設(shè)置高度
- 點擊蒙層關(guān)閉彈窗
待做功能
- 動態(tài)設(shè)置方向 （目前只支持自下向上）
用法
<span @click="open"></span>
<span @click="close"></span>
// 組件 height 類型 String
<dialog ref="dialogs" heights="60" ><span>插槽</span></dialog>
open(){
// 打開彈窗方法
this.$refs.dialogs.open()
}
close(){
// 關(guān)閉彈窗方法
this.$refs.dialogs.close()
}
dialog 組件內(nèi)容 如果想用途中底部出現(xiàn)的 復(fù)制引用即可 不需要改動組件
<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>
