mpvue弹出框
注意：携带参数还需要在confirmSend() 里面
<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>
<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>
