实现以下弹框样式功能
1.在components新建一个文件showModel.wpy作为组件，复制下面代码
<style lang="less" scoped>
.bg_model {display: flex;justify-content: center;align-items: center;// 弹框背景.bg_hui {width: 100%;height: 100%;position: fixed;z-index: 1000;left: 0;top: 0;background: #000;opacity: 0.5;overflow: hidden;}
}
.toastDialog {width: 580rpx;padding-top: 50rpx;position: fixed;top: 55%;left: 0;z-index: 9999;margin: -370rpx 85rpx;background-color: #fff;box-shadow: 0 4rpx 12rpx 0 rgba(59, 79, 150, 0.2);border-radius: 15rpx;display: flex;flex-direction: column;align-items: center;.toastTit {font-size: 34rpx;font-weight: 800;}.toastContent {padding-left: 50rpx;padding-right: 50rpx;margin-top: 30rpx;color: #545454;font-size: 30rpx;display: flex;justify-content: center;}.btn_wai {display: flex;height: 90rpx;border-top: 1rpx solid #f6f6f6;width: 100%;margin-top: 60rpx;.btn1 {width: 50%;display: flex;align-items: center;justify-content: center;font-size: 34rpx;font-weight: 800;color: #919191;}.btn2 {border-left: 1rpx solid #f6f6f6;width: 50%;font-size: 34rpx;display: flex;align-items: center;justify-content: center;font-weight: 800;color: white;background: #2a67ea;border-bottom-right-radius: 15rpx;}}
}
</style><template><view><view class="bg_model" catchtouchmove="true" wx:if='{{tkShowModel}}'><view class="bg_hui"></view><!--stateType=1成功弹框 --><view class="toastDialog"><view class="toastTit">{{title1}}</view><view class="toastContent">{{content1}}</view><view class="btn_wai"><view class="btn1" @tap="cancelClick">取消</view><view class="btn2" @tap="submitClick">{{btnName}}</view></view></view></view></view>
</template><script>
import wepy from 'wepy'export default class showModel extends wepy.component {props = {tkShowModel: {type: Boolean,default: false,//是否显示},title1: {type: String,default: '',//标题},content1: {type: String,default: '',//内容},btnName: {type: String,default: '',//按钮文字},}data = {}watch = {}methods = {
cancelClick(){this.tkShowModel=falsethis.$emit('cancelClick',false)//修改父组件值
},
submitClick(){this.tkShowModel=falsethis.$emit('submitClick',false)//修改父组件值
}}onLoad() { }
}
</script>
2.使用
<template><view>
<showModel :title1.sync="title1" :content1.sync="content1" :btnName="btnName" :tkShowModel.sync="tkShowModel" @cancelClick.user="cancelClick" @submitClick.user="submitClick"></showModel></view>
</template><script>
import showModel from '@/components/showModel'components = {showModel,}data = {tkShowModel:false,
title1:'是否确认下单？',
content1:'确认后，售后单将被提交到工厂。若售后单被工厂驳回后，请回到电脑端修改后重新提交！',
btnName:'确认下单',}methods = {submitClick(val){// 点击确认this.tkShowModel=valthis.$apply()},cancelClick(val){// 取消this.tkShowModel=valthis.$apply()},
}