uniapp中封装一个弹框组件

1，准备组件popup

// components文件夹中popup组件<template><view><viewclass="show-box-bg wx-login-box"><viewclass="conten"><viewclass="titl">{{ popupMsg.title}}</view><viewclass="text">{{ popupMsg.content}}</view><viewclass="btn-box"><viewclass="cancel" @click='hidePopup("no")'>{{ popupMsg.cancel}}</view><viewclass="confirm" @click='hidePopup("yes")'>{{ popupMsg.confirm}}</view></view></view></view></view></template><script>exportdefault{//(1)子组件中，通过props接收到数据 		props:['popupMsg'],data(){return{}}, 		methods:{ 			hidePopup:function(type){//子组件中，使用$emit调用父组件自定义事件，还可以传参this.$emit('handlePopup', type)},}}</script><style scoped lang="scss">.wx-login-box{ 		width:100%; 		position: fixed; 		top:0; 		left:0; 		height:100%; 		background-color:rgba(0,0,0,0.5); 		z-index:88;.conten{ 			width:78%; 			background-color: #fff; 			z-index:99; 			position: absolute; 			top:50%; 			left:50%; 			transform:translate(-50%,-50%); 			border-radius:14upx; 			overflow: hidden;.titl{ 				width:90%; 				height:110rpx; 				font-size:40rpx; 				padding:05%; 				line-height:140rpx;}.text{ 				width:90%; 				font-size:28rpx; 				padding:05%; 				margin-bottom:40rpx;}.memberY{ 				width:90%; 				font-size:28rpx; 				color: #FFCC00; 				padding:05%; 				text-align: center;}.memberB{ 				width:90%; 				font-size:28rpx; 				color: #007AFF; 				padding:05%; 				text-align: center;}.btn-box{ 				width:100%; 				height:90rpx; 				display: flex; 				border-top:2rpx solid #969696;.cancel{ 					width:50%; 					height:100%; 					font-size:40rpx; 					color: #999; 					text-align: center; 					line-height:89rpx; 					border-right:2rpx solid #969696;}.confirm{ 					width:50%; 					height:100%; 					font-size:40rpx; 					color: #ffcc00; 					text-align: center; 					line-height:99rpx;}}}}</style>

2，使用组件

// An highlighted block<template><viewclass="content"><button type='primary' @click='showPopup=true'>点击弹框</button><!--(3)使用--><popup:popupMsg="popupMsg"  		@handlePopup='handleShowOrHidePopup' 		v-show="showPopup"/></view></template><script>//(1)引入import popupfrom'@/components/popup.vue';exportdefault{//(2)挂载 		components:{popup},data(){return{ 				showPopup:false, 				popupMsg:{ 					title:'这是标题', 					content:'这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容', 					cancel:'取消', 					confirm:'确定'}, 				hotgoods:[{id:'01',title:'标题一'},{id:'02',title:'标题二'},],}}, 		methods:{ 			handleShowOrHidePopup:function(type){if(type=='yes'){ 					console.log(type)this.showPopup=false}else{ 					console.log(type)this.showPopup=false}},}}</script>