uniapp 封装弹窗组件（popup ，可以修改弹窗按钮名，显示内容）_uniapp uni-popup 封装

 项目中使用了多个弹窗，且内容不一样，于是重新进行封装（避免后期样式大改）

其中：图片，文字 按钮名 功能 都可以自定义（父子相互传值）   

注意:按钮可以不传 默认是 “确认”,"取消"

项目结构↓

 ↓组件代码

<template>
	<view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popConfig">
				<view><img :src="iconUrl" alt=""></view>
				<view class="popConfig-txt">
					<view class="popConfig-title">{{popName}}</view>
					<view class="popConfig-des">{{popDes}}</view>
				</view>
				<view class="popConfig-btn" v-if="popBtn">
					<button @click="operate">{{popBtn[0].name}}</button>
					<button @click="close">{{popBtn[1].name}}</button>
				</view>
				<view class="popConfig-btn" v-else>
					<button @click="operate">确认</button>
					<button @click="close">取消</button>
				</view>
			</view>
 
		</uni-popup>
	</view>
</template>
 
<script>
export default {
	props: {
		showPop: {
				type: Boolean,
				required: true
			},
			iconUrl: {
				type: String,
				required: true
			},
			popName: {
				type: String,
				required: true
			},
 
			popDes: {
				type: String,
				required: true
			},
			popBtn: {  //	[{name:'确认'},{name:'取消'}]
				type: Array,
				required: false
			}
		},
		data() {
			return {};
		},
		methods: {
			close() {
				
				this.$emit("changeShowPop", false)
			},
			operate(){
				this.$emit("firstBtnOperate","")
			}
		},
		watch: {
			'showPop': {
				handler(newVal, oldVal) {
					// console.log(111)
					if (this.showPop == true) {
						this.$nextTick(() => {
							this.$refs.popup.open()
						})
					} else {
						this.$nextTick(() => {
							this.$refs.popup.close()
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
	}
</script>
 
<style lang="scss" scoped>
	.popConfig {
		background-color: white;
		box-sizing: border-box;
		padding: 50rpx;
		width: 90vw;
		min-height: 600rpx;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
 
		view {
			img {
				margin-top: 30rpx;
				width: 150rpx;
				height: 150rpx;
			}
		}
 
		.popConfig-txt {
			text-align: center;
 
			.popConfig-title {
				font-size: 40rpx;
				color: #3b385aff;
			}
 
			.popConfig-des {
				font-size: 35rpx;
				color: #3b385aff;
			}
		}
 
		.popConfig-btn {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
 
			button {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #5861d0ff;
				color: white;
				border-radius: 40rpx;
			}
 
			button:nth-last-child(1) {
				background-color: white;
				color: #5861d0;
				border: 2rpx solid #5861d0;
			}
		}
	}
</style>

 具体使用↓

	<popUpCom 
		:showPop = "showPop"  
		iconUrl='../../../static/img/common/完成.png' 
		popName='完成' 
		popDes='请确认是否完成？' 
	
		@changeShowPop = "changeShowPop"
		@firstBtnOperate = "firstBtnOperate"
		>
		</popUpCom>

script↓ 

注意：

btnConfig：  可以传可以不传，本案例没传 如果要传可以参照：[{name:'确认'},{name:'取消'}]

showPop 变量控制弹窗是否显示，默认为false

toStart() 方法是点击某个按钮触发 打开弹窗

changeShowPop() :方法是关闭弹窗

firstBtnOperate（）：方法是点击弹窗中的确认按钮，要触发的事件

 
<script>
	import popUpCom from '@/components/popUpCom/popUpCom'
	export default {
		data() {
			return {
				btnConfig:[{name:"确认"},{name:"取消"}],
				showPop:false
			};
		},
 
		components: {
 
			popUpCom
		},
		methods: {
 
			toStart() {
				// this.$refs.popup.open('center')
				this.showPop = true
			
			},
			changeShowPop(v){
				console.log(v)
				this.showPop = v
			},
			firstBtnOperate(){
				console.log(666)
			}
		}
 
	}
</script>