mpvue小程序中实现自定义弹窗

mpvue小程序中实现自定义弹窗

这里是页面内容

<div @click="show_pro()">点我显示弹窗</div>
<!--弹窗的页面-->
<div class="modalMask" v-if="isModel"></div>
<div class="modalDialog" v-if="changeModel">
<div class="modalContent">
<p class="contentTip">我是弹窗的页面哦~</p>
</div>
<div class="modalFooter">
<div class="btnCancel" @tap="tapCancel">取消</div>
<div class="btnConfirm" @tap="confirmSend">确定</div>
</div>
</div>
<!-- //结束 -->

这里是关键的js啦

<script>
export default {
data() {
return {
changeModel: false,
isModel: false,
val: "",
};
},
methods: {
//  弹框取消
tapCancel() {
console.log("取消");
this.changeModel = !this.changeModel;
this.isModel = !this.isModel;
},
//  确认
confirmSend() {
console.log("确认");
this.changeModel = !this.changeModel;
this.isModel = !this.isModel;

},
show_pro(val) {
this.changeModel = !this.changeModel;
this.isModel = !this.isModel;
}
}
};
</script>

样式自然也为大家准备好啦，在这里：

<style>
/* 弹窗开始 */
.modalMask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modalDialog {
box-sizing: border-box;
width: 560rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 9999;
background: #fff;
margin: -180rpx 95rpx;
border-radius: 8rpx;
}
.modalContent {
box-sizing: border-box;
display: flex;
padding: 50rpx 53rpx;
font-size: 32rpx;
align-items: center;
justify-content: center;
flex-direction: column;
}
.contentTip {
text-align: center;
font-size: 36rpx;
color: #333333;
}
.teleStyle {
background: #ffffff;
border: 1px solid #979797;
border-radius: 6rpx;
line-height: 50rpx;
height: 50rpx;
box-sizing: border-box;
padding-left: 12rpx;
width: 460rpx;
font-size: 28rpx;
/*color: rgba(0,0,0,0.25);*/
margin-top: 30px;
}
.modalFooter {
box-sizing: border-box;
display: flex;
flex-direction: row;
height: 100rpx;
border-top: 1px solid #e5e5e5;
font-size: 32rpx;
line-height: 100rpx;
}
.btnCancel {
width: 50%;
font-size: 32rpx;
color: #333;
text-align: center;
border-right: 1px solid #e5e5e5;
}
.btnConfirm {
font-size: 32rpx;
width: 50%;
color: #508cee;
text-align: center;
}
/* 弹窗结束 */
</style>

就这样的几行代码就实现了自制的弹窗，快去试试吧v