效果圖

微信截圖_20191023112514.png

代碼實(shí)現(xiàn)

.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;
  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,
    },
    // 彈框內(nèi)容
    content: {
      type: String,
      value: ''
    },
    // 是否顯示取消按鈕
    showCancel: {
      type: Boolean,
      value: true
    },
    // 確認(rèn)按鈕文本
    confirmText: {
      type: String,
      value: '確認(rèn)'
    },
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },
  /**
   * 組件的方法列表
   */
  methods: {
    close: function () {
      this.setData({
        isShow: false
      });
    },
    Success: function (e) {
      this.triggerEvent('success', '確認(rèn)')
      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='確認(rèn)撤銷送貨單？' bind:success='onSuccess'></bullet-box>

3在js中點(diǎn)擊顯示和確認(rèn)函數(shù)

data{
    isBulletBoxShow:false
},
 // 點(diǎn)擊撤銷/彈框
  cancelDelivery:function(e){
    this.setData({
      isBulletBoxShow: true,
    })
  },
  // 彈框確認(rèn)
  onSuccess:function(e) {
   
  },