效果并不完整，有需求可以自行修改

适用于vue2   弹窗只支持居中弹出和下方弹出，内容可以自定义

效果图

子组件 

代码

新建组件文件夹  zPopup  

<template><view class="zPopup_show" v-if="style_show":class="mode=='center'?(show?'zPopup_show_center openAnimation':'zPopup_show_center closeAnimation'):mode=='bottom'?(show?'zPopup_show_bottom  openAnimation':'zPopup_show_bottom  closeAnimation'):''"@tap.stop="maskClose?colosePopue():()=>{}"><view class="zSlotViews":class="mode=='bottom'?(show?'zSlotViews_bottom_open  ':'zSlotViews_bottom_close  '):''" @tap.stop="()=>{}"><view class="zSlotView"><image class="colseIcon" src="" mode="aspectFit" @tap.stop="colosePopue"></image><!-- 插槽内容可以自定义 --><slot name="center"></slot></view></view></view>
</template><script>export default {name: "zPopup",//show  主要控制动画效果//mode   设置方向弹出// maskClose  是否可以通过 点击遮罩层来关闭 弹窗props: ['show', 'mode', 'maskClose'],//style_show   控制显示不显示data() {return {style_show: null //控制显示不显示};},onLoad() {},onShow() {},watch: {show: {handler(newName, oldName) {// console.log(newName, '新值');// console.log(oldName, '老值');//为true是开启动画，动画效果不用延迟出现//为false是关闭动画，动画效果先关闭 再进行整个弹窗的关闭，不会出现回显数据消失if (newName) {this.style_show = newName;} else {setTimeout(() => {this.style_show = newName;}, 300)}},immediate: true,deep: true}},methods: {//关闭弹窗colosePopue() {if (!this.style_show) {return}this.$emit('closeCar')}}}
</script><style lang="scss" scoped>//居中显示.zPopup_show_center {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999999999;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: center;opacity: 1;border-radius: 0rpx !important;}.openAnimation {animation: slow_show 0.22s linear;}.closeAnimation {opacity: 0 !important;animation: close_slow_show 0.22s linear;}@keyframes slow_show {0% {opacity: 0;}100% {opacity: 1;}}@keyframes close_slow_show {0% {opacity: 1;}100% {opacity: 0;}}//从下方弹出显示.zPopup_show_bottom {width: 100vw;height: 100vh;position: fixed;bottom: 0;left: 0;z-index: 999999999;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: flex-end;opacity: 1;border-radius: 18rpx;.zSlotViews {width: 100% !important;position: relative;bottom: 0;left: 0;// padding: 30rpx 50rpx !important;}.zSlotViews_bottom_open {animation: From_bottom_to_top 0.22s linear;}.zSlotViews_bottom_close {animation: From_top_to_bottom 0.3s linear;}}@keyframes From_bottom_to_top {0% {bottom: -100%;}100% {bottom: 0;}}@keyframes From_top_to_bottom {0% {bottom: 0;}100% {bottom: -100%;}}.zSlotViews {width: 100vw !important;box-sizing: border-box;// background: #fff;.zSlotView {// background: #FFFFFF;width: 100vw;border-radius: 12rpx;position: relative;z-index: 10074;display: flex;justify-content: center;align-items: center;.colseIcon {width: 40rpx;height: 40rpx;position: absolute;right: 30rpx;top: 30rpx;background: lightcoral;}}}
</style>

全局使用 挂载

//挂载悬浮窗
import zPopup from '@/components/zPopup/zPopup.vue'
Vue.component('zPopup ', zPopup )

单独使用

import zPopup from "@/components/zPopup /zPopup .vue"
components: {zPopup},

父组件使用

<template><view><view class=""><zPopup :show="show" :mode="'center'" @closeCar="closeCar"><!-- 插槽可自定义内容 --><template v-slot:center><view style="width: 100%;height: 500rpx;background: #fff;border-radius: 40rpx;"></view></template></zPopup></view><view class="" @tap="open()">打开</view></view>
</template>

js

<script>import zPopup from "@/components/zPopup /zPopup .vue"export default {data() {return {show: false,};},components: {zPopup},methods: {//打开弹窗open() {//做一些数据回显的话优先调接口，再显示弹窗setTimeout(() => {this.show = true;}, 200)},//关闭弹窗closeCar() {this.show = false;},}}
</script>