由于微信小程序没有引入ui库,有弹框样式写起来比较麻烦,所以自己封装了一个弹框组件
wxml
<view wx:if="{{show}}">
<view class='mask_layer' bindtap='modal_click_Hidden' />
<view class='modal_box'>
<!-- <view class="title">title</view> -->
<view class='content'>
<!-- <text class='modalMsg'></text> -->
<slot></slot>
<!-- <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea> -->
</view>
<!-- <view class='btn1'>
<view bindtap='modal_click_Hidden' class='cancel'>取消</view>
<view bindtap='Sure' class='Sure'>确定</view>
</view> -->
<image class="closeRule" wx:if="{{showCloseBtn}}" bindtap="closeRule" data-type="help" src="https://bm-mini-program.oss-cn-hangzhou.aliyuncs.com/static/christmas/close.png"></image>
</view>
</view>
js
// pages/BlankMEactivity/pages/component/van-poup/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
show: {
type: Boolean,
},
showCloseBtn:{
type:Boolean
}
},
/**
* 组件的初始数据
*/
data: {
show: false,
showCloseBtn:false
},
/**
* 组件的方法列表
*/
methods: {
closeRule(){
this.triggerEvent('closeRule')
}
}
})
json
{
"component": true,
"usingComponents": {}
}
wxss
.mask_layer {
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
}
.modal_box {
max-height: 100%;
overflow-y: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
/* background: #fafafa; */
padding: 30rpx 50rpx;
border-radius: 3px;
}
.title {
padding: 15px;
text-align: center;
background-color: gazure;
}
.content {
padding-bottom: 70px;
/* overflow-y: scroll; */
/*超出父盒子高度可滚动*/
/* display: flex;
align-items: center;
justify-content: center; */
}
.input_show1 {
margin: 0 auto;
width: 80%;
margin-left: 10%;
font-size: 32rpx;
text-align: center;
}
.btn1 {
width: 100%;
margin-top: 65rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: white;
}
.cancel {
width: 100%;
padding: 10px;
text-align: center;
color: black;
}
.Sure {
width: 100%;
padding: 10px;
color: #44b549;
background-color: white;
border-left: 1px solid #d0d0d0;
text-align: center;
}
.modalMsg {
text-align: center;
margin-top: 45rpx;
display: block;
}
.closeRule {
width: 56rpx;
height: 56rpx;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}