foreword
The message pop-up window component is used very frequently in development, and many operation results, warnings, and failures need to be prompted. Although most ui component libraries are very convenient for message prompt pop-up windows, in the ui customization development, encapsulate your own Components are necessary, and learning to encapsulate components is also an essential part of learning the front-end process.
achieve effect
The effects of the two implementations are shown here, and the same is true for other types.
Component writing
First, let’s write the component. The structure of this component is relatively simple. The outer popup is a mask, the popup-info is the main body of the component, and the inside is a prompt icon and the following prompt text. We use the type parameter to control the displayed icon, and the prompt text messageText here is also passed in from the parent component.
<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>
The picture can use a local address or base64, and then the following is the receiving parameter part props of the component. First, show controls the display and disappearance of the component, messageText controls the displayed text, and type controls the type of prompt. Because the general message component disappears automatically after a few seconds after popping up, there are many logics to realize this function. What I use here is to use this.$emit to trigger the close event of the binding of the component after displaying for 1s, and pass it in the parent component. This close can close the display
<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>
The Css part also shows:
<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>
Use of parent components
After the child component is introduced and registered in the parent component, it can be used
<mymessage :show="show_loginMessage" type="success" :messageText="loginMessageText"
@close="cancel_message"></mymessage>
Then write the properties corresponding to the needs:
show_loginMessage: false,
loginMessageText:'登录成功',
The method to close the trigger:
cancel_message() {
this.show_loginMessage = !this.show_loginMessage
}
Such a simple message prompt box is completed, and there are still many places to expand, such as controlling the display duration, the animation of the pop-up window gradually entering and exiting, etc. You can improve and realize more functions by yourself~