uniapp 弹框小组件

uniapp 弹框小组件，支持H5、APP、微信小程序

点击查看代码

/**
* 名称：弹窗组件
*/
<template>
	<!-- #ifdef H5 || APP-PLUS -->
	<view class="uni-popup" :class="position" @touchmove.prevent>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="uni-popup" :class="position" catchtouchmove="preventTouchMove">
			<!-- #endif -->

			<!-- 遮罩层 -->
			<view class="mask-div" v-show="showPopup == true" @click.stop="close_popup" @touchmove.prevent></view>

			<view class="popup-content" :class="popHeight ? 'height' : ''">
				<view class="content" :class="{'show':showPopup && poptitle,'show-new':showPopup && ! poptitle,'color_btn':contentBgColor}">
					<!-- 标题 -->
					<view class="title bdr-bottom" v-if="poptitle">
						<view class="popup-back-btn" v-if="popBack" @click="popup_back">返回</view>
						{{ poptitle }}
						<view class="top-close-btn" v-if="topCloseBtn"  @click="close_popup"><i class="iconfont">&#xe681;</i></view>
					</view>
					<!-- 插槽自定义内容 -->
					<slot></slot>
					<!-- 关闭按钮 -->
					<view class="close-icon" v-if="closeBtn" @click="close_popup">
						<i class="iconfont">&#xe84d;</i>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props: {
			showPopup: { // 控制弹窗显示隐藏
				type: Boolean,
				default: false
			},
			position: { // 弹窗显示位置
				type: String
			},
			poptitle: { // 弹窗标题
				type: String
			},
			btnShow: { // 控制底部按钮是否显示
				type: Boolean,
				default: false
			},
			closeBtn: { // 控制是否显示关闭按钮
				type: Boolean
			},
			popHeight: { // 控制弹窗高度
				type: Boolean,
				default: false
			},
			contentBgColor: {
				type: Boolean,
				default: false
			},
			overflowX:{
				type: Boolean,
				default: false
			},
			popBack:{
				type: Boolean,
				default: false
			},
			topCloseBtn:{
				type: Boolean,
				default: false
			}
		},
		methods: {
			close_popup: function(evt) {
				this.$emit('close_popup', evt);
			},
			popup_back: function(evt) {
				this.$emit('popup_back', evt);
			}
			

		}
	}
</script>

<style lang="scss">
// 弹窗公共样式
.uni-popup {
	
	.popup-content {
		position: fixed;
		z-index: 998;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		max-width: 640px;
	}

	&.center {

		.popup-content {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			top: 50%;
			bottom: auto;
			transform: translate(0, -50%);
			flex-direction: column;
			
			.content {
				position: relative;
				width: 80%;
				border-radius: 15rpx;
				display: none;
				
				&.show,&.show-new {
					display: flex;
					flex-direction: column;
					.top-close-btn{
						display: block;
					}

				}
				
				.close-icon {
					position: absolute;
					left: 0;
					right: 0;
					bottom: -90rpx;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.iconfont {
						font-size: 64rpx;
						color: #fff;
					}
				}
			}
		}
	}
	
	&.bottom {
		display: flex;
		align-items: flex-end;
	
		.content {
			width: 100%;
			height: 0;
			border-radius: 15rpx 15rpx 0 0;
			transition: all .3s;
			
			&.show {
				height: 66vh;
				padding-bottom: env(safe-area-inset-bottom);
				
				.button-group {
					display: flex;
				}
				.top-close-btn{
					display: block;
				}
			}
			
			&.show-new {
				height: 60vh;
				padding-bottom: env(safe-area-inset-bottom);
				
				.button-group {
					display: flex;
				}
				.top-close-btn{
					display: block;
				}
			}
			
			.button-group {
				background: #fff;
				padding-top: 16rpx;
				text-align: center;
				cursor: pointer;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 50;
				height: 120rpx;
				box-sizing: border-box;
				align-items: center;
				justify-items:center;
				display: none;
				
				.dialog-button {
					margin-bottom: 40rpx;
					font-size: 30rpx;
					border-radius: 50rpx;
					padding: 20rpx 0;
					line-height: 40rpx;
				}
			}
		}
		
		.height {
			
			.content {
				display: none;
				height: auto;
				
				&.show-new,&.show{
					-webkit-animation: spec-menu-move .3s both ease;
					-moz-animation: spec-menu-move .3s both ease;
					display: block;
				}
				
			}
			
			
		}
	}

	.content {
		background-color: #fff;
		overflow-x: visible;
		
		.title {
			font-size: 32rpx;
			text-align: center;
			padding: 25rpx 20rpx;
			word-break: break-all;
			overflow: hidden;
		}
		.popup-back-btn{
			position: absolute;
			top:28rpx;
			left: 28rpx;
			color:#999;
			font-size: 26rpx;
		}
		.top-close-btn{
			transition: top 0.5s ease;
			right: 8px;
			border-radius: 0;
			border-top-right-radius: 3px;
			border-top-left-radius: 3px;
			z-index: 9999;
			opacity: 1;
			border: 0;
			font-size: 22px;
			color: #000;
			top: -24px;
			width: 38px;
			height: 29px;
			line-height: 25px;
			text-align: center;
			background-color: rgb(255, 255, 255) !important;
			position: absolute;
			z-index: 99;
			display: none;
			.iconfont{
				font-size: 20rpx;
				color: #999;
			}
		}
		
		.button-group {
			display: flex;
			padding-bottom: env(safe-area-inset-bottom);
		
			.dialog-button {
				font-size: 28rpx;
				background-color: #f1f1f1;
				flex: 1;
				margin: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				border-radius: 10rpx;
			}
			
			.button-confirm {
				color: #fff;
			}
			
			.disable {
				background-color: #ececec;
				color: #ccc;
			}
		}
	}
}
	.color_btn{
		background-color:transparent
	}
</style>