front-end/mobile-code/src/components/uni-popup.vue

<template>
    <view v-if="showPopup" class="uni-popup" :style="{'z-index': zIndex}">
        <view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
        <view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
            <view :class="['uni-popup__wrapper-box', isRadius?'uni-popup__wrapper-radius':'']" @click.stop="clear" :style="{'maxHeight': maxHeight,'width': width}">
                <slot />
            </view>
        </view>
    </view>
</template>

<script>
export default {
	name: 'UniPopup',
	props: {
		// 开启动画
		animation: {
			type: Boolean,
			default: true
		},
		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
		type: {
			type: String,
			default: 'center'
		},
		// 是否开启自定义
		custom: {
			type: Boolean,
			default: false
		},
		// maskClick
		maskClick: {
			type: Boolean,
			default: true
		},
		show: {
			type: Boolean,
			default: true
		},
		// 最大高度，以rpx为单位
		maxHeight: {
			type: String,
			default: '500rpx'
		},
		// 定义宽度
		width: {
			type: String,
			default: '80%'
		},
		zIndex: {
			type: Number,
			default: 99999
		},
		isRadius: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ani: '',
			showPopup: false
		}
	},
	watch: {
		show(newValue) {
			if (newValue) {
				this.open()
			} else {
				this.close()
			}
		}
	},
	created() {},
	methods: {
		clear() {},
		open() {
			this.$emit('change', {
				show: true
			})
			this.showPopup = true

			this.$nextTick(() => {
				this.ani = 'uni-' + this.type
			})
		},
		close(type) {
			if (!this.maskClick && type) return
			this.$emit('change', {
				show: false
			})
			this.ani = ''
			this.$emit('update:show', false)
			this.$nextTick(() => {
				this.showPopup = false
			})
		}
	}
}
</script>
<style lang="scss">
.uni-popup {
    position: fixed;
    /*  #ifdef  H5  */
    top: 0px;
    // top: 50px;
    /*  #endif  */
    /*  #ifndef  H5  */
    top: 0px;
    /*  #endif  */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    overflow: hidden;

    &__mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;

        &.ani {
            transition: all 0.3s;
        }

        &.uni-top,
        &.uni-bottom,
        &.uni-center {
            opacity: 1;
        }
    }

    &__wrapper {
        position: absolute;
        z-index: 999;
        box-sizing: border-box;

        &.ani {
            transition: all 0.3s;
        }

        &.top {
            top: 0;
            left: 0;
            width: 100%;
            transform: translateY(-100%);
        }

        &.bottom {
            bottom: 0;
            left: 0;
            width: 100%;
            transform: translateY(100%);
        }

        &.center {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(1.2);
            opacity: 0;
        }
            &-radius {
            border-radius: 20px;
        }
        &-box {
            position: relative;
            box-sizing: border-box;
        }

        &.uni-custom {
            // & .uni-popup__wrapper-box {
            //    padding: 30upx;
            //    background-color: inherit;
            // }

            &.center {
                & .uni-popup__wrapper-box {
                    position: relative;
                    max-width: 90%;
                    max-height: 90%;
                }
            }

            &.top,
            &.bottom {
                & .uni-popup__wrapper-box {
                    width: 100%;
                    overflow-y: scroll;
                    border-top-left-radius: 30upx;
                    border-top-right-radius: 30upx;
                }
            }
        }

        &.uni-top,
        &.uni-bottom {
            transform: translateY(0);
        }

        &.uni-center {
            transform: scale(1);
            opacity: 1;
        }
    }
}
</style>