partnerApp/components/common/z-popup.vue

<template>
	<view class="popup_view" :style="{top:popupTop, bottom: popupBottom, zIndex: zIndex}"
		:class="{'popup_view_bottom': type == 'bottom' ,'popup_view_center':type == 'center', 'popup_view_top': type == 'top'}"
	 @touchmove="onTouchMove" v-if="currentValue">
		<!-- 遮罩层动画 -->
		<view class="popup_mask" @click="hideOnBlur && setAnimationHide()"></view>
		<!-- 显示信息层 -->
		<view class="popup_container" ref="popupContainer" :class="{'popup_container_bottom': type == 'bottom' ,'popup_container_center':type == 'center', 'popup_container_top': type == 'top'}" :style="containerStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const animation = weex.requireModule('animation');
	const dom = weex.requireModule('dom');
	// #endif
	export default {
		props: {
			//是否显示
			value: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			//点击遮罩层关闭弹窗
			hideOnBlur: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			//禁止页面滚动（H5生效）
			scroll: {
				type: Boolean,
				default: true
			},
			// 类型
			//  bottom 靠下
			//  center 居中
			//  top 靠上
			type: {
				type: String,
				default: function() {
					return "bottom";
				}
			},
			// 偏移
			offset: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			// index
			zIndex: {
				type: Number,
				default: function() {
					return 500;
				}
			},
			width: {
				type: String,
				default: function() {
					return '600upx';
				}
			},
			radius: {
				type: String,
				default: function() {
					return '0upx';
				}
			},
		},
		computed: {
			containerStyle(){
				let style = {
					'opacity': this.opacity,
					'width':this.width,
					'border-radius': this.radius
				};
				if(this.transform){
					style.transform = this.transform;
				}
				return style;
			}
		},
		created() {
			this.systemInfo = uni.getSystemInfoSync();
			if (typeof this.value !== "undefined") {
				if(this.value){
					this.setAnimationShow();
				}
			}
		},
		watch: {
			value(val) {
				if(val){
					this.setAnimationShow();
				} else {
					this.setAnimationHide();
				}
			}
		},
		data() {
			return {
				// 传进来的值
				currentValue: false,
				opacity: 0,
				popupTop: "inherit",
				popupBottom: "inherit",
				transform: "",
				systemInfo: {},
				timer: null
			};
		},
		methods: {
			onTouchMove: function(event) {
				!this.scroll && event.preventDefault();
			},
			getPxRpx(px){
				let ratio = 750 / this.systemInfo.screenWidth;
				return ratio * px;
			},
			setAnimationShow() {
				this.currentValue = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.timer && clearTimeout(this.timer);
						this.$emit("input", true);
						this.$emit("change", true);
						if (this.type == "bottom") {
							this.animationParsing({
								translateY: 0,
								defaulTranslateY: 1,
								opacity: 1
							});
							this.popupTop = "0rpx";
							if(this.offset > 0){
								this.popupBottom = this.offset + "rpx";
							} else {
								this.popupBottom = this.getPxRpx(this.systemInfo.windowBottom) + "rpx";
							}
						} else if (this.type == "center") {
							this.popupTop = "0rpx";
							this.popupBottom = "0rpx";
							this.animationParsing({
								scale: 1,
								defaulScale: 0,
								opacity: 1
							});
						} else if (this.type == "top") {
							this.animationParsing({
								defaulTranslateY: -1,
								translateY: 0,
								opacity: 1
							});
							this.popupBottom = "0rpx";
							if(this.offset > 0){
								this.popupTop = (this.offset + this.getPxRpx(this.systemInfo.statusBarHeight)) +  "rpx";
								this.maskTop = this.popupTop;
							} else {
								this.popupTop = "0rpx";
								this.maskTop = "0rpx";
							}
						}
					});
				});
			},
			setAnimationHide() {
				this.timer && clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.currentValue = false;
					this.$emit("input", false);
					this.$emit("change", false);
				}, 300);
				if (this.type == "bottom") {
					this.animationParsing({
						defaulTranslateY: 0,
						translateY: 1,
						opacity: 0
					});
					this.timer = setTimeout(() => {
						this.popupTop = "inherit";
						this.popupBottom = "0rpx";
						this.maskTop = "0rpx";
						this.maskBottom = "0rpx";
					},300);
				} else if (this.type == "center") {
					this.popupTop = "0rpx";
					this.popupBottom = "0rpx";
					this.animationParsing({
						scale: 0,
						defaulScale: 1,
						opacity: 0
					});
				} else if (this.type == "top") {
					this.animationParsing({
						defaulTranslateY: 0,
						translateY: -1,
						opacity: 0
					});
					this.timer = setTimeout(() => {
						this.popupTop = "0rpx";
						this.popupBottom = "inherit";
						this.maskTop = "0rpx";
						this.maskBottom = "0rpx";
					}, 300);
				}
			},
			animationParsing(data){
				// #ifndef APP-NVUE
				let transform = "";
				if(data.hasOwnProperty("translateX")){
					transform += " translateX("+ (data.translateX * 100) +"%)"
				}
				if(data.hasOwnProperty("translateY")){
					transform += " translateY("+ (data.translateY * 100) +"%)"
				}
				if(data.hasOwnProperty("scale")){
					transform += " scale("+ data.scale +")"
				}
				this.opacity = data.opacity;
				this.transform = transform;
				// #endif
				// #ifdef APP-NVUE
				let popupContainer = this.$refs.popupContainer;
				if(popupContainer){
					// if(data.hasOwnProperty("defaulTranslateY") || data.hasOwnProperty("defaulScale")){
					// 	let defaulTransform = "";
					// 	if(data.hasOwnProperty("defaulTranslateY")){
					// 		defaulTransform = "translateY(" + (data.defaulTranslateY * 100) + "%)";
					// 	}
					// 	if(data.hasOwnProperty("defaulScale")){
					// 		defaulTransform = "scale(" + data.defaulScale + ")";
					// 	}
					// 	this.transform = defaulTransform;
					// }
					if(Array.isArray(popupContainer)){
						popupContainer = popupContainer[0];
					}
					let transform = "";
					if(data.hasOwnProperty("translateX") || data.hasOwnProperty("translateY")){
						transform += " translate("+ (data.translateX ? data.translateX * 100 : 0) +"%, " + (data.translateY ? data.translateY * 100 : 0) + "%)";
					}
					if(data.hasOwnProperty("scale")){
						transform += " scale("+ data.scale +")"
					}
					animation.transition(popupContainer, {
					  styles: {  
						transform: transform, 
						transformOrigin: 'center center',
						opacity: data.opacity,
					  },
					  duration: 300, //ms  
					  timingFunction: 'ease',  
					  delay: 0 //ms  
					}, function () { });
				}
				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.popup_view {
		position: fixed;
		z-index: 500;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.popup_view_bottom {
		align-items: flex-end;
		justify-content: center;
	}
	.popup_view_top {
		align-items: flex-start;
		justify-content: center;
	}
	.popup_view_center {
		align-items: center;
		justify-content: center;
	}
	/*遮罩层*/
	.popup_mask {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	.popup_container {
		/* #ifndef APP-NVUE */
		max-width: 100vw;
		max-height: 100vh;
		min-height: 50rpx;
		transition: all 0.4s;
		z-index: 2;
		/* #endif */
		z-index: 501;
		opacity: 0;
		font-size: 28rpx;
		position: relative;
		overflow: hidden;
	}
	.popup_container_bottom {
		transform: translateY(100%);
		width: 750rpx;
	}
	.popup_container_center {
	}
	.popup_container_top {
		transform: translateY(-100%);
		width: 750rpx;
	}
</style>