front-end/jdApp/src/components/plugin/bottom-popup.vue

<template>
	<view @touchmove.stop.prevent>
		<view class="tui-popup-class tui-bottom-popup" :class="{'tui-popup-show':show}" :style="{background:bgcolor,height:height?height+'upx':'auto'}">
			<slot></slot>
		</view>
		<view class="tui-popup-mask" :style="{background: maskBgcolor}" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
	</view>
</template>

<script>
export default {
	name: 'tuiBottomPopup',
	props: {
		// 是否需要mask
		mask: {
			type: Boolean,
			default: true
		},
		// 控制显示
		show: {
			type: Boolean,
			default: false
		},
		// 背景颜色
		bgcolor: {
			type: String,
			default: '#fff'
		},
		// 蒙版背景颜色
		maskBgcolor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.6)'
		},
		// 高度 upx
		height: {
			type: Number,
			default: 0
		}
	},
	methods: {
		handleClose() {
			if (!this.show) {
				return
			}
			this.$emit('close', {})
		}
	}
}
</script>

<style lang="scss" scoped>
	.tui-bottom-popup {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20upx;
        // 适配iphoneX
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.tui-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>