前言
在写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提示框的封装也差不多,只需要给组件加一个延时自动关闭就可以