uniapp小程序手写封装popup弹窗message提醒框组件_uni-popup消息提示

前言

在写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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

组件的使用

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

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

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

<!-- 密码错误弹窗弹窗 -->
<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>
1
2
3
4
5

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