yxk_gk_master/components/uni-popup/uni-popup.vue.rej

diff a/components/uni-popup/uni-popup.vue b/components/uni-popup/uni-popup.vue	(rejected hunks)
@@ -1,131 +1,321 @@
 <template>
-	<view>
-		<view class="popup" v-if="sho">
-			<view class="popup-info">
-				<view style="text-align: center; border-bottom: #D8D8D8 1px solid;">审批流</view>
-				<view style="margin-top: 10px;margin-bottom: 10px;">
-					<view class="textTiem" :class="[actiove==index?'actiove':'']" v-for="(item,index) in Approvallist" :key="index"
-					 @click="single(item,index)">
-						{{item.name}}
-					</view>
-				</view>
-				<view class="foorBut">
-					<button type="default" @click="close">关闭</button>
-					<button type="default" @click="determine">确定</button>
-				</view>
+	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"
+	 @touchmove.stop.prevent="clear">
+		<uni-transition v-if="maskShow" class="uni-mask--hook" :mode-class="['fade']" :styles="maskClass" :duration="duration"
+		 :show="showTrans" @click="onTap" />
+		<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
+			<view class="uni-popup__wrapper-box" @click.stop="clear">
+				<slot />
 			</view>
-		</view>
-
+		</uni-transition>
+		<!-- #ifdef H5 -->
+		<keypress v-if="maskShow" @esc="onTap" />
+		<!-- #endif -->
 	</view>
 </template>
+
 <script>
+	import popup from './popup.js'
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * PopUp 弹出层
+	 * @description 弹出层组件，为了解决遮罩弹层的问题
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [top|center|bottom] 弹出方式
+	 * 	@value top 顶部弹出
+	 * 	@value center 中间弹出
+	 * 	@value bottom 底部弹出
+	 * 	@value message 消息提示
+	 * 	@value dialog 对话框
+	 * 	@value share 底部分享示例
+	 * @property {Boolean} animation = [ture|false] 是否开启动画
+	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
+	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
+	 */
+
 	export default {
+		name: 'UniPopup',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
 		props: {
-			// 控制弹框显示隐藏
-			sho: {
+			// 开启动画
+			animation: {
 				type: Boolean,
-				default: false
+				default: true
 			},
-			// 传过来的数据
-			Approvallist: {
-				type: Array,
-				default: []
+			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+			// message: 消息提示 ; dialog : 对话框
+			type: {
+				type: String,
+				default: 'center'
 			},
+			// maskClick
+			maskClick: {
+				type: Boolean,
+				default: true
+			}
+		},
+		provide() {
+			return {
+				popup: this
+			}
+		},
+		mixins: [popup],
+		watch: {
+			/**
+			 * 监听type类型
+			 */
+			type: {
+				handler: function(newVal) {
+					this[this.config[newVal]]()
+				},
+				immediate: true
+			},
+			isDesktop: {
+				handler: function(newVal) {
+					this[this.config[this.type]]()
+				},
+				immediate: true
+			},
+			/**
+			 * 监听遮罩是否可点击
+			 * @param {Object} val
+			 */
+			maskClick: {
+				handler: function(val) {
+					this.mkclick = val
+				},
+				immediate: true
+			}
 		},
-
 		data() {
 			return {
-				actiove: null,
-				can: {
-					type:false,
-					nodeId: null
-				}
+				duration: 300,
+				ani: [],
+				showPopup: false,
+				showTrans: false,
+				maskClass: {
+					'position': 'fixed',
+					'bottom': 0,
+					'top': 0,
+					'left': 0,
+					'right': 0,
+					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
+				},
+				transClass: {
+					'position': 'fixed',
+					'left': 0,
+					'right': 0,
+				},
+				maskShow: true,
+				mkclick: true,
+				popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
+			}
+		},
+		created() {
+			this.mkclick = this.maskClick
+			if (this.animation) {
+				this.duration = 300
+			} else {
+				this.duration = 0
 			}
 		},
 		methods: {
-			close() {
-				this.$emit("close", this.can)
+			clear(e) {
+				// TODO nvue 取消冒泡
+				e.stopPropagation()
+			},
+			open() {
+				this.showPopup = true
+				this.$nextTick(() => {
+					new Promise(resolve => {
+						clearTimeout(this.timer)
+						this.timer = setTimeout(() => {
+							this.showTrans = true
+							// fixed by mehaotian 兼容 app 端
+							this.$nextTick(() => {
+								resolve();
+							})
+						}, 50);
+					}).then(res => {
+						// 自定义打开事件
+						clearTimeout(this.msgtimer)
+						this.msgtimer = setTimeout(() => {
+							this.customOpen && this.customOpen()
+						}, 100)
+						this.$emit('change', {
+							show: true,
+							type: this.type
+						})
+					})
+				})
+			},
+			close(type) {
+				this.showTrans = false
+				this.$nextTick(() => {
+					this.$emit('change', {
+						show: false,
+						type: this.type
+					})
+					clearTimeout(this.timer)
+					// 自定义关闭事件
+					this.customOpen && this.customClose()
+					this.timer = setTimeout(() => {
+						this.showPopup = false
+					}, 300)
+				})
+			},
+			onTap() {
+				if (!this.mkclick) return
+				this.close()
+			},
+			/**
+			 * 顶部弹出样式处理
+			 */
+			top() {
+				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
+				this.ani = ['slide-top']
+				this.transClass = {
+					'position': 'fixed',
+					'left': 0,
+					'right': 0,
+				}
 			},
-			single(obj, index) {
-				// 获取下标，颜色却换
-				this.actiove = index
-				// 返回选择节点ID
-					this.can.nodeId = obj.nodeId
+			/**
+			 * 底部弹出样式处理
+			 */
+			bottom() {
+				this.popupstyle = 'bottom'
+				this.ani = ['slide-bottom']
+				this.transClass = {
+					'position': 'fixed',
+					'left': 0,
+					'right': 0,
+					'bottom': 0
+				}
 			},
-			determine() {
-				this.$emit("determine", this.can)
+			/**
+			 * 中间弹出样式处理
+			 */
+			center() {
+				this.popupstyle = 'center'
+				this.ani = ['zoom-out', 'fade']
+				this.transClass = {
+					'position': 'fixed',
+					/* #ifndef APP-NVUE */
+					'display': 'flex',
+					'flexDirection': 'column',
+					/* #endif */
+					'bottom': 0,
+					'left': 0,
+					'right': 0,
+					'top': 0,
+					'justifyContent': 'center',
+					'alignItems': 'center'
+				}
 			}
 		}
 	}
 </script>
-<style>
-	@charset "UTF-8";
+<style lang="scss" scoped>
+	.uni-popup {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
 
-	.actiove {
-		color: #2589EE;
+	.fixforpc-z-index {
+		/* #ifndef APP-NVUE */
+		z-index: 999;
+		/* #endif */
 	}
 
-	.popup {
-		position: fixed;
+	.uni-popup__mask {
+		position: absolute;
+		top: 0;
+		bottom: 0;
 		left: 0;
 		right: 0;
+		background-color: $uni-bg-color-mask;
+		opacity: 0;
+	}
+
+	.mask-ani {
+		transition-property: opacity;
+		transition-duration: 0.2s;
+	}
+
+	.uni-top-mask {
+		opacity: 1;
+	}
+
+	.uni-bottom-mask {
+		opacity: 1;
+	}
+
+	.uni-center-mask {
+		opacity: 1;
+	}
+
+	.uni-popup__wrapper {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+	}
+
+	.top {
+		/* #ifdef H5 */
+		top: var(--window-top);
+		/* #endif */
+		/* #ifndef H5 */
 		top: 0;
-		height: 100vh;
-		background-color: rgba(0, 0, 0, 0.6);
-		z-index: 9998;
+		/* #endif */
 	}
 
-	.popup-info {
-		position: fixed;
-		width: 90%;
-		top: 30%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		font-size: 30upx;
-		border-radius: 20upx;
-		background-color: #fff;
-		z-index: 9999;
-		padding: 10px;
-	}
-
-	.foorBut {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.textTiem {
-		width: 100%;
-		height: 20px;
-		line-height: 20px;
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap
-	}
-
-	.foorBut button {
-		/* width: 45%;
-		height: 40px; */
-		border-radius: 2px;
-		padding: 0;
-		width: 100px;
-		height: 30px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: 14px;
-		background-color: #008FD4;
-	}
-
-	.foorBut button:nth-child(1) {
-		border: #007AFF 1px solid;
-		color: #007AFF;
-		background-color: #FFFFFF;
-	}
-
-	.foorBut button:nth-child(2) {
-		background-color: #007AFF;
-		color: #FFFFFF;
+	.fixforpc-top {
+		top: 0;
+	}
+
+	.bottom {
+		bottom: 0;
+	}
+
+	.uni-popup__wrapper-box {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: relative;
+		/* iphonex 等安全区设置，底部安全区适配 */
+		/* #ifndef APP-NVUE */
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		/* #endif */
+	}
+
+	.content-ani {
+		// transition: transform 0.3s;
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+	}
+
+
+	.uni-top-content {
+		transform: translateY(0);
+	}
+
+	.uni-bottom-content {
+		transform: translateY(0);
+	}
+
+	.uni-center-content {
+		transform: scale(1);
+		opacity: 1;
 	}
 </style>