null/components/mix-popup/mix-popup.vue

<template>
	<!-- :style="{zIndex:zIndex}" -->
	<view 
		class="uni-popup" 
		:class="[
			{'uni-popup--show': state > 0},
			{'uni-popup__center': type === 'center'}
		]" 
		@touchmove.stop.prevent="stopPrevent"
	>
		<view class="mask" :class="{'mask--show': state === 1}" @click="hide('mask')" v-show="isShowMask"/>
		<view v-if="type==='right'" class="wrapper wrapper__right" :class="{'wrapper--show': state === 1}">
			<view class="wrapper__box" @click.stop="stopPrevent">
				<slot />
			</view>
		</view>
		<!-- 底部弹窗 -->
		<view v-if="type==='bottom'" class="wrapper wrapper__bottom" :class="{'wrapper--show': state === 1}">
			<view class="wrapper__box" @click.stop="stopPrevent">
				<slot />
			</view>
		</view>
		<!-- 中间弹窗 -->
		<view v-if="type==='center'" class="wrapper wrapper__center" :class="{'wrapper__center--show': state === 1}">
			<view class="wrapper__center__box" @click.stop="stopPrevent">
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MixPopup',
		props: {
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			isShowMask:{
				type:Boolean,
				default:true
			},
			//是否阻止点击mask隐藏
			isStopMaskHide:{
				type:Boolean,
				value:false,
			},
			zIndex:{
				type:Number,
				value:1001,
			},
			
		},
		data() {
			return {
				state: 0,
			}
		},
		created() {
		  //	this.show()
		},
		methods: {
			show() {
				this.state = 2;
				this.$nextTick(() => {
					this.state = 1;
				})
			},
			hide(type) {
				
				if(type == 'mask' && this.isStopMaskHide==true ){
					return;
				}
				uni.hideKeyboard();
				this.state = 2;
				setTimeout(() => {
					this.state = 0;
				}, 350)
				this.$emit('onHide');
			},
			toggle(){
				if(this.state === 0){
					this.show()
				}else{
					this.hide();
				}
			},
			
			stopPrevent() {},
		}
	}
</script>
<style lang="scss" scoped>
	// #ifndef APP-PLUS-NVUE */
	// view{
	// 	display: flex;
	// 	flex-direction: column;
	// }
	// /* #endif
	.uni-popup {
		position: fixed;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		bottom: 0;
		left: 0;
		right: 0;
		// z-index: 101;
		z-index: 1000;
		overflow: hidden;
		transform: translateX(750rpx);
		
		display: flex;
		flex-direction: column;
		
		&--show{
			transform: translateX(0);
		}
		&__center{
			justify-content: center;
			align-items: center;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 101;
		opacity: 0;
		transition: opacity .38s;
		background-color: rgba(0,0,0,.3);
		
		&--show{
			opacity: 1;
		}
	}

	.wrapper {
		position: fixed;
		z-index: 1002;
		transition: transform .3s, opacity .3s;
		
		&__right{
			flex-direction: column;
			top: 0;
			bottom: 0;
			right: 0;
			transform: translateX(610rpx);
		}
		&__bottom{
			flex-direction: column;
			left: 0;
			bottom: 0;
			right: 0;
			transform: translateY(100%);
		}	
		&__center{
			transform: scale(1.16);
			opacity: 0;
		}
		&--show{
			transform: translate(0rpx, 0rpx);
		}
		&__center--show{
			
			transform: scale(1);
			opacity: 1;
		}
		&__box{
			flex: 1;
			position: relative;
		}
	}

	/* .center {
		#ifndef APP-NVUE 
		display: flex;
		flex-direction: column;
		 #endif
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		justify-content: center;
		align-items: center;
		transform: scale(1.1);
		opacity: 0;
	}
 */
</style>