移动端小程序app封装message弹窗提示组件全过程

前言

message弹窗组件在开发中使用非常频繁，很多操作的成果，警告，失败都需要进行提示，虽然大部分ui组件库都很方便的message提示弹窗，但是在ui定制化开发中，封装自己的组件是很有必要的，并且学会封装组件也是学习前端过程中必不可少的一部分。

实现效果

这里展示两种实现的效果，举一反三，其它类型同理

组件编写

首先来编写组件，这种组件的结构比较简单，外层popup做一个蒙版遮罩，popup-info就是组件主体，内部就是一个提示的icon和下面的提示文字。我们使用type参数来控制展示的icon，然后这里的提示文字messageText也是从父组件传入。

<template>
	<view>
		<view class="popup" v-show="show">
			<view class="popup-info">
				<!-- type为 success 为成功图标
				type为 info 为提醒图标 -->
				<image v-if="type == 'success'" :src="img" class="imgebae"></image>
				<image v-if="type == 'info'" src="@/static/common_icons_info.png" class="imgebae1"></image>
				<view class="info-text" >{{messageText}}</view>
			</view>
		</view>
	</view>
</template>

图片使用本地地址或是base64都行，然后下面是组件的接收参数部分props，首先show控制组件的展示和消失，messageText控制展示的文字，type控制提示的类型。因为一般的message组件是弹出来几秒之后自动消失，实现这种功能的逻辑很多，我这里使用的是展示1s之后，使用this.$emit触发组件的绑定的close事件，在父组件中通过这个close就可以进行关闭显示

<script>
	export default {
		name:"my-message",
		props: {
			show: {
				type:Boolean,
				default: false
			},
			messageText: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				img:'data:image/png;base64,这里是base64编码不作展示'
			};
		},
		watch:{
			show: {
				immediate: true,
				handler(newVal, oldVal) {
				  if(newVal){
					  setTimeout(() => this.$emit('close'), 1000);
				  }
				}
			}
		},
	}
</script>

Css部分也展示一下：

<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: 136px;
		height: 136px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: 17px;
		z-index: 9999;
		background: linear-gradient(176.71deg, #1F6AB5 -53.25%, #FFFFFF 50%);
		box-shadow: 0px 1px 13px -6px rgba(0, 0, 0, 0.25);
		border-radius: 7px;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.imgebae {
			width: 31.82px;
			height: 21.57px;
			margin-top: 36.33px;
		}
		.imgebae1 {
			width: 66.66rpx;
			height: 66.66rpx;
			margin-top: 31.33px;
		}
		.info-text {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 17px;
			line-height: 24px;
			text-align: center;
			margin-bottom: 28px;
			/* text */
			
			color: #292945;
			
			mix-blend-mode: normal;
			opacity: 0.9;
		}
	}

</style>

父组件的使用

在父组件中引入子组件并注册之后，便可以进行使用了

<mymessage :show="show_loginMessage" type="success" :messageText="loginMessageText" 
@close="cancel_message"></mymessage>

然后写对应需要的属性：

show_loginMessage: false,
loginMessageText:'登录成功',

关闭触发的方法：

cancel_message() {
	this.show_loginMessage = !this.show_loginMessage
}

这样一个简易的的message提示框就完成了，还有很多地方可以去扩展，比如控制展示的时长，弹窗渐入渐出的动画等等，大家可以自行去完善实现更多功能~