微信小程序自定义弹窗（可通用）

标签：function   rgb   font   OLE   小程序   ssh   XML   size   event   

效果图

.wxml

.wxss
.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}

.modal {
width: 580rpx;
background-color: #fff;
border-radius: 16rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.content {
color: #666666;
font-size: 36rpx;
line-height: 47rpx;
white-space: pre-wrap;
padding: 100rpx 6rpx 100rpx;
text-align: center;
letter-spacing: 1rpx;
}

.btns {
height: 100rpx;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
font-size: 36rpx;
}

.cancel {
line-height: 100rpx;
flex-grow: 1;
color: #666666;
border-radius: 0;
border-top: 1rpx solid #D8D8D8;
background-color: #FFFFFF;
}

.success {
line-height: 100rpx;
flex-grow: 1;
color: #FFFFFF;
background-color: #289CFF;
border-radius: 0;
}

.js

Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示
isShow: {
type: Boolean,
},
// 弹框内容
content: {
type: String,
value: ‘‘
},
// 是否显示取消按钮
showCancel: {
type: Boolean,
value: true
},
// 确认按钮文本
confirmText: {
type: String,
value: ‘确认‘
},
},

/**
* 组件的初始数据
*/
data: {

},
/**
* 组件的方法列表
*/
methods: {
close: function () {
this.setData({
isShow: false
});
},
Success: function (e) {
this.triggerEvent(‘success‘, ‘确认‘)
this.close();
},
Cancel: function (e) {
this.triggerEvent(‘sancel‘, ‘取消‘)
this.close();
},
}
})

如何使用
1，在需要的page的json文件引用
```
{
"usingComponents": {
"bullet-box": "/common/component/bulletBox/bulletBox"
}
}
```
2在wxml中添加
```
<bullet-box isShow="{{isBulletBoxShow}}" content=‘确认撤销送货单？‘ bind:success=‘onSuccess‘></bullet-box>
```
3在js中点击显示和确认函数
```
data{
isBulletBoxShow:false
},
// 点击撤销/弹框
cancelDelivery:function(e){
this.setData({
isBulletBoxShow: true,
})
},
// 弹框确认
onSuccess:function(e) {

},
```

微信小程序自定义弹窗（可通用）

标签：function   rgb   font   OLE   小程序   ssh   XML   size   event   

原文地址：https://www.cnblogs.com/moxiaodegu/p/11751304.html