ysh/uni-app/components/jc-popUp/jc-popUp.vue

<style>
	.jcPopUp{
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index:9999;
	}
    .jcPopUp-mark{
		top: 0; 
		left: 0;
		width: 100%;
		height: 100%;
		z-index:9997;
		position: absolute;
		background: rgba(0,0,0,0.5);
    }
	.jcPopUp-content{
		width:100%;
		height:100%;
		top:0;
		left:0;
		position: absolute;
		z-index:9998;
	}
	.st{
		animation: showTop 0.25s;
	}
	.sl{
		animation: showLeft 0.25s;
	}
	.sr{
		animation: showRight 0.25s;
	}
	.sb{
		animation: shoBottom 0.25s;
	}
	.ht{
		animation: hideTop 0.25s;
	}
	.hl{
		animation: hideLeft 0.25s;
	}
	.hr{
		animation: hideRight 0.25s;
	}
	.hb{
		animation: hideBottom 0.25s;
	}
	@keyframes showTop{
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
	}
	@keyframes showLeft{
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateY(0);
		}
	}
	@keyframes showRight{
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}
	@keyframes showBottom{
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}
	@keyframes hideTop{
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(-100%);
		}
	}
	@keyframes hideLeft{
		from {
			transform: translateY(0);
		}
		to {
			transform: translateX(-100%);
		}
	}
	@keyframes hideRight{
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(100%);
		}
	}
	@keyframes hideBottom{
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(100%);
		}
	}
</style>
 
<template name="jc-popUp">
	<view class="jcPopUp" v-show="popshow" @click.stop="" v-if="markMove=='false'" @touchmove.stop="">	 
		<view class="jcPopUp-mark"></view>	
		<view class="jcPopUp-content" @tap="markTap" :class="position=='top'&&!hideanimation?'st':position=='left'&&!hideanimation?'sl':position=='right'&&!hideanimation?'sr':position=='bottom'&&!hideanimation?'sb':position=='top'&&hideanimation?'ht':position=='left'&&hideanimation?'hl':position=='right'&&hideanimation?'hr':position=='bottom'&&hideanimation?'hb':''">	
			<view style="z-index:1000000;" @tap.stop="">
				<slot></slot>
			</view>			 
			<icon type="clear" :size="iconSize" color="#FFFFFF" style="position:absolute;" :style="'left:'+iconLeft+'%;top:'+iconTop+'%;'" v-if="closeIcon=='true'" @tap="iconTap"/>
		</view>				
	</view>
	<view class="jcPopUp" v-show="popshow" @click.stop="" @tap.stop="" v-else="">
		<view class="jcPopUp-mark"></view>
		<view class="jcPopUp-content" @tap="markTap" :class="position=='top'&&!hideanimation?'st':position=='left'&&!hideanimation?'sl':position=='right'&&!hideanimation?'sr':position=='bottom'&&!hideanimation?'sb':position=='top'&&hideanimation?'ht':position=='left'&&hideanimation?'hl':position=='right'&&hideanimation?'hr':position=='bottom'&&hideanimation?'hb':''">
			<view style="z-index:1000000;" @tap.stop="">
				<slot></slot>
			</view>	 			
			<icon type="clear" :size="iconSize" color="#FFFFFF" style="position:absolute;" :style="'left:'+iconLeft+'%;top:'+iconTop+'%;'" v-if="closeIcon=='true'" @tap="iconTap"/>
		</view>						
	</view>
</template>

<script>
	export default {
		props:{
			position:{	//弹层出现的方位
				type:String,
				default:""  
			},
			markTapHide:{	//点击蒙层是否关闭弹层
				type:String,
				default:''
			},
			markMove:{	// 蒙层是否可以滑动击穿
				type:String,
				default:'false'
			},
			closeIcon:{	//是否显示 关闭 图标
				type:String,
				default:''
			},
			iconSize:{	//图标大小
				type:String,
				default:'26'
			},
			iconTop:{	//图标距离顶部的位置
				type:String,
				default:'0'
			},
			iconLeft:{	//图标距离左边的位置
				type:String,
				default:'0'
			}
		},
		data() { 
			return { 
				popshow:false,
				hideanimation:false
			};
		},
		methods:{
			show(){
				this.popshow = true;
			},
			hide(){
				let that = this;			
				that.hideanimation = true;
				if(that.position==null){
					that.popshow = false;
				}else{
					setTimeout(function(){
						that.popshow = false;
						that.hideanimation = false;
					},250)
				};				
			},
			markTap(){
				let that = this;
				if(that.markTapHide != 'true'){
					return false
				};				
				that.hideanimation = true;
				if(that.position==null){
					that.popshow = false;
				}else{
					setTimeout(function(){
						that.popshow = false;
						that.hideanimation = false;
					},250)
				};				
			},
			iconTap(){
				let that = this;
				if(that.closeIcon != 'true'){
					return false
				};				
				that.hideanimation = true;
				if(that.position==null){
					that.popshow = false;
				}else{
					setTimeout(function(){
						that.popshow = false;
						that.hideanimation = false;
					},250)
				};
			}
		},
	}
</script>