重构 popup 并封装成组件

examples/hello-uniapp/components/uni-popup.vue

+<template>
+	<view>
+		<view class="uni-mask" v-show="show" :style="{top:titleHeight}" @click="hide"></view>
+		<view :class="['uni-popup','uni-popup-'+type]" v-show="show">
+			{{msg}}
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props : {
+		show : {
+			type : Boolean,
+			default : false
+		},
+		type : {
+			type : String,
+			//top - 顶部， middle - 居中, bottom - 底部
+			default : 'middle'
+		},
+		msg :{
+			type : String,
+			default : ""
+		}
+	},
+	methods:{
+		hide : function(){
+			this.$emit('hidePopup');
+		}
+	}
+}
+</script>
+<style>
+.uni-mask {
+	position: fixed;
+	z-index: 998;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, .3);
+}
+
+.uni-popup {
+	position: absolute;
+	z-index: 999;
+	background-color: #ffffff;
+	box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
+}
+
+.uni-popup-middle {
+	display:flex;
+	flex-direction: column;
+	align-items:center;
+	width: 380upx;
+	height: 380upx;
+	border-radius: 10upx;
+	top:50%;
+	left:50%;
+	transform: translate(-50%, -50%);
+	justify-content:center;
+	padding:30upx;
+}
+
+.uni-popup-top {
+	top: 0;
+	left:0;
+	width: 100%;
+	height: 100upx;
+	line-height:100upx;
+	text-align: center;
+}
+.uni-popup-bottom {
+	left:0;
+	bottom: 0;
+	width: 100%;
+	height: 100upx;
+	line-height:100upx;
+	text-align: center;
+}
+</style>

examples/hello-uniapp/pages/template/popup/popup.vue

 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="mask" v-show="showMask" :style="{top:titleHeight}" @click="hide"></view>
-		<view class="popup popup-middle" v-show="showState.middle">
-			<view class="desc">
-				<text>Hello</text>
-			</view>
-		</view>
-		<view class="popup popup-top" v-show="showState.top">
-			<text>顶部 popup</text>
-		</view>
-		<view class="popup popup-bottom" v-show="showState.bottom">
-			<text>底部 popup</text>
-		</view>
 		<view class="uni-padding-wrap">
-			<view class="uni-btn-v">
-				<button type="button" @click="show">弹出 popup</button>
-				<button type="button" @click="show" data-position="top">顶部弹出 popup</button>
-				<button type="button" @click="show" data-position="bottom">底部弹出 popup</button>
+			<view class="uni-helllo-text uni-common-mt uni-center">
+				请点击下面的按钮进行体验
+			</view>
+			<!-- 居中 -->
+			<uni-popup :show="showPopupMiddle" :type="popType" v-on:hidePopup="hidePopup">
+				<view class="uni-center" style="font-size:0;">
+					<image class="image" style="width:150upx;" mode="widthFix" src="../../../static/uni@2x.png" />
+				</view>
+				<view class="uni-common-mt uni-helllo-text uni-center">
+					消息内容使用 slot 形式定义
+				</view>
+			</uni-popup>
+			<!-- 顶部 -->
+			<uni-popup :show="showPopupTop" :type="popType" :msg="msg" v-on:hidePopup="hidePopup"></uni-popup>
+			<!-- 底部 -->
+			<uni-popup :show="showPopupBottom" :type="popType" :msg="msg" v-on:hidePopup="hidePopup"></uni-popup>
+			<view class="uni-btn-v uni-common-mt">
+				<button type="button" @click="showMiddlePopup">居中弹出 popup</button>
+				<button type="button" @click="showTopPopup" data-position="top">顶部弹出 popup</button>
+				<button type="button" @click="showBottomPopup" data-position="bottom">底部弹出 popup</button>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
+	import uniPopup from "../../../components/uni-popup.vue";
 	export default {
 		data() {
 			return {
-				title: 'popup',
-				showState: {
-					top: false,
-					middle: false,
-					bottom: false
-				},
-				showMask: false,
-				activePop: 'middle',
-				titleHeight: 0
+				popType : 'middle',
+				title : "popup",
+				showPopupMiddle : false,
+				showPopupTop : false,
+				showPopupBottom : false,
+				msg : ""
 			}
 		},
-		onBackPress() {
-			if (this.showMask) {
-				this.showMask = false;
-				this.hide();
-				return true;
-			}
-		},
-		created() {
-			//#ifdef H5
-			this.titleHeight = '44px'
-			//#endif
-		},
 		methods: {
-			show(evt) {
-				var pos = evt.target.dataset.position
-				switch (pos) {
-					case 'top':
-						this.activePop = 'top'
-						break
-					case 'bottom':
-						this.activePop = 'bottom'
-						break
-					default:
-						this.activePop = 'middle'
-				}
-				this.showMask = true
-				this.showState[this.activePop] = true
+			//统一的关闭popup方法
+			hidePopup : function(){
+				this.showPopupMiddle = false;
+				this.showPopupTop    = false;
+				this.showPopupBottom = false;
+			},
+			//展示居中 popup
+			showMiddlePopup : function(){
+				this.hidePopup();
+				this.popType   = "middle";
+				this.showPopupMiddle = true;
 			},
-			hide() {
-				this.showMask = false
-				this.showState[this.activePop] = false
+			//展示顶部 popup
+			showTopPopup: function(){
+				this.hidePopup();
+				this.popType = 'top';
+				this.msg = "顶部 popup 信息内容";
+				this.showPopupTop = true;
+			},
+			//展示底部 popup
+			showBottomPopup: function(){
+				this.hidePopup();
+				this.popType = 'top';
+				this.msg = "底部 popup 信息内容";
+				this.showPopupBottom = true;
 			}
+		},
+		components:{
+			uniPopup
 		}
 	}
 </script>
 <style>
-	.mask {
-		position: fixed;
-		z-index: 998;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background-color: rgba(0, 0, 0, .3);
-	}
-
-	.popup {
-		position: absolute;
-		z-index: 999;
-		background-color: #ffffff;
-		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
-		box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
-	}
-
-	.popup-middle {
-		width: 400upx;
-		height: 400upx;
-		border-radius: 10upx;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		margin: auto;
-	}
-
-	.popup-top {
-		top: 0;
-		width: 100%;
-		height: 100upx;
-		text-align: center;
-	}
-
-	.popup-top text {
-		line-height: 100upx;
-		margin-left: 20upx;
-		font-size: 32upx;
-	}
-
-	.popup-bottom {
-		bottom: 0;
-		width: 100%;
-		height: 100upx;
-		text-align: center;
-	}
-
-	.popup-bottom text {
-		line-height: 100upx;
-		font-size: 32upx;
-	}
-
-	.popup .list-view {
-		height: 600upx;
-	}
-
-	.list-view-item {
-		position: relative;
-		padding: 22upx 30upx;
-		overflow: hidden;
-		font-size: 28upx;
-	}
-
-	.list-view-item::after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 30upx;
-		height: 2upx;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.desc {
-		padding: 10upx 20upx;
-		font-size: 30upx;
-		line-height: 30upx;
-		margin-top: 150upx;
-		text-align: center;
-	}
-</style>
+	
+</style>
\ No newline at end of file