uniapp小程序手写封装popup弹窗message提醒框组件

前言

在写uniapp小程序的时候，弹窗提醒经常会用到，虽然弹窗的组件很多，但是通常别人封装好的弹窗组件自定义度不高，很难匹配自己的ui需求。所以本篇文章教大家封装自己的弹窗提醒组件

效果展示：

封装组件

取消和确认按钮的点击事件使用$emit传事件。中间的文字部分接收父组件的传值。
css大家可以根据自己的需要进行修改

<template>
	<view class="popup" v-show="show">
		<view class="popup-info">
			<view class="popup-title"> 小五提醒你</view>
			<view class="popup-text">{{popupText}}</view>
			<view class="popup-btn">
				<view class="btn-left" @click="cancel">取消</view>
				<view class="btn-right" @click="confirm">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-popup",
		props: {
			show: {
				type:Boolean
			},
			popupText: {
				type:String
			}
		},
		watch:{
			 oldshow: function (newVal, oldVal) {
			      // console.log(newVal);
			      this.show = newVal;
				  console.log(newVal)
			}
		},
		data() {
			return {
			};
		},
		methods: {
			cancel() {
				this.$emit('close')
			},
			confirm() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss">
.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0,0,0,0.4) !important;
		z-index: 9998;
	}
	
	.popup-info{
		position: fixed;
		width: 320px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: 30upx;
		box-shadow: 0px 1px 13px -6px rgba(0, 0, 0, 0.25);
		background-color: #fff;
		z-index: 9999;
		border-radius: 8px;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		.popup-title {
			width: 320px;
			height: 56px;
			background: linear-gradient(95.13deg, #5DA4F7 3.75%, #3285E4 95.95%);
			border-radius: 8px 8px 0px 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 17px;
			line-height: 24px;
			/* identical to box height, or 140% */
			color: #FFFFFF;

		}
		.popup-text {
			width: 262px;
			display: flex;
			justify-content: center;
			margin-top: 23px;
			text-align:center;
			
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 17px;
			line-height: 24px;
		}
		.popup-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 250px;
			height: 42px;
			border-top-color: #f5f5f5;
			margin: 0 auto;
			margin-top: 22px;
			margin-bottom: 20px;
			.btn-left{
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				width: 107px;
				height: 42px;
				border: 0.5px solid #569FF4;
				border-radius: 35px;
				
				justify-content: center;
				align-items: center;
				
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 16px;
				line-height: 22px;
				letter-spacing: -0.2176px;
				color: #569FF4;
			}
			.btn-right{
				display: flex;
				align-items: center;
				
				
				width: 107px;
				height: 42px;
				
				background: linear-gradient(95.13deg, #5DA4F7 3.75%, #3285E4 95.95%);
				border-radius: 35px;
				
				justify-content: center;
				align-items: center;
				font-color: #FFFFFF;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 16px;
				line-height: 22px;
				letter-spacing: -0.2176px;
				color: #FFFFFF;
			}
		}
	}
</style>

组件的使用

组件封装好后，我们就可以在页面进行使用：
show控制弹窗的弹出和隐藏
popupText是弹窗中间的提示文字
@close是关闭按钮触发的事件
@confirm是确认按钮触发的时间

<mypopup :show="show_doing" :popupText="popupText_doing" @close="cancel_doing" @confirm="confirm_doing"></mypopup>

在页面进行正常的组件注册然后使用就可以啦~

<!-- 密码错误弹窗弹窗 -->
<mypopup :show="show_error" :popupText="popupText_error" @close="cancel_error" @confirm="confirm_error"></mypopup>

<!-- 账号未绑定提醒弹窗 -->
<mypopup :show="show_unlogin" :popupText="popupText_unlogin" @close="cancel_unlogin" @confirm="confirm_unlogin"></mypopup>

根据自己的需求，大家也可以进行自定义的封装，message提示框的封装也差不多，只需要给组件加一个延时自动关闭就可以