效果图
.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) {
},
```