效果圖

.wxml

<cover-view class='mask' wx:if='{{isShow}}'>
<cover-view class='modal'>
<cover-view class='content'>{{content}}</cover-view>
<cover-view class='btns'>
<button class='cancel' bindtap='Cancel' wx:if='{{showCancel}}'>取消</button>
<button class='success' bindtap='Success'>{{confirmText}}</button>
</cover-view>
</cover-view>
</cover-view>

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

.modal {
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: '確認'
},
},

/**
* 組件的初始數(shù)據(jù)
*/
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中點擊顯示和確認函數(shù)
```
data{
isBulletBoxShow:false
},
// 點擊撤銷/彈框
cancelDelivery:function(e){
this.setData({
isBulletBoxShow: true,
})
},
// 彈框確認
onSuccess:function(e) {

},
```

總結

以上是生活随笔為你收集整理的微信小程序自定义弹窗（可通用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。