实现以下弹框样式功能
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=false
this.$emit('cancelClick',false)//修改父组件值
},
submitClick(){
this.tkShowModel=false
this.$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=val
this.$apply()
},
cancelClick(val){
// 取消
this.tkShowModel=val
this.$apply()
},
}