erp-ui-m/components/thorui/tui-bottom-popup/tui-bottom-popup.vue

<template>
	<view @touchmove.stop.prevent>
		<view class="tui-popup-class tui-bottom-popup" :class="{'tui-popup-show':show,'tui-popup-radius':radius}"
			:style="{backgroundColor:backgroundColor,height:height?height+'rpx':'auto','--dot-color':dotColor||'#2979ff'}">
			<view class="tui-header" v-if="title">
				<view>{{title}}</view>
				<icon type="clear" :size="16" color="#c0c0c0" class="tui-icon-close" @tap.stop="handleClose"></icon>
			</view>
			<slot></slot>
		</view>
		<view class="tui-popup-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
	</view>
</template>

<script>
	export default {
		name: "tuiBottomPopup",
		props: {
			title: {
				type: String,
				default: ""
			},
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			dotColor: {
				type: String,
				default: '#2979ff'
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: "#fff"
			},
			//高度 rpx
			height: {
				type: Number,
				default: 0
			},
			//设置圆角
			radius: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close', {});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tui-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx;
		font-weight: bold;
		font-size: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		position: relative;
		color: #333333;

		&:before {
			content: " ";
			height: 12px;
			background-color: var(--dot-color);
			border-radius: 10px;
			width: 4px;
			margin-right: 20rpx;
		}

		&:after {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1rpx;
			z-index: 1;
			// border-bottom: 1rpx solid #e5e5e5;
			background-color: #e5e5e5;
			transform-origin: 0 100%;
			transform: scaleY(0.5);
		}
	}

	.tui-icon-close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.tui-bottom-popup {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		/* visibility: hidden; */
		opacity: 0;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
	}

	.tui-popup-radius {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
	}

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

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

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