微信小程序一个自定义弹框iModal

因为微信小程序的授权现在需要用户点击按钮才能调用授权接口，而小程序自带的弹框的确认按钮不能绑定bindtap或使用open-type属性，所以打算自己写一个自定义弹窗供大家方便使用...

成品：

wxml

  
    {{title}}
    {{content}}
    
      取消
      {{confirmText}}
      {{confirmText}}
      {{confirmText}}
      {{confirmText}}
    
  

使用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: 8rpx;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}

.title {
  font-size: 32rpx;
  color: #0e0e0e;
  text-align: center;
  line-height: 105rpx;
  margin: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e6e6e6;
  font-weight: 700;
}

.content {
  color: #878787;
  font-size: 28rpx;
  line-height: 47rpx;
  white-space: pre-wrap;
  padding: 30rpx 86rpx 40rpx;
  text-align: center;
  letter-spacing: 1rpx;
}

.btns {
  height: 100rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f6f6;
  font-size: 32rpx;
  border-top: 1rpx solid #e6e6e6;
}

.cancel {
  line-height: 100rpx;
  flex-grow: 1;
  border-right: 1rpx solid #e6e6e6;
}

.success {
  line-height: 100rpx;
  flex-grow: 1;
  color: #52ce38;
}

js

// component/modaler/iModal/iModal.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示
    isShow: {
      type: Boolean,
      value: true
    },
    // 弹框标题
    title: {
      type: String,
      value: ''
    },
    // 弹框内容
    content: {
      type: String,
      value: ''
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      value: true
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      value: '同意'
    },
    // 确认按钮的open-type
    open_type: {
      type: String,
      value: ''
    },
    // bindSuccess 在HTML使用该属性可将 使用页面 的函数绑定到确认按钮的事件当中去
    // bindCancel 在HTML使用该属性可将 使用页面 的函数绑定到取消按钮的事件当中去
  },

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

  },
  /**
   * 组件的方法列表
   */
  methods: {
    close: function() {
      this.setData({
        hide: true
      });
    },
    Success: function(e) {
      console.log('Success');
      var myEventDetail = e // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('Success', myEventDetail, myEventOption)
      this.close();
    },
    Cancel: function(e) {
      var myEventDetail = e // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('Cancel', myEventDetail, myEventOption)
      this.close();
    },
  }
})

我在页面使用组件

其中用户点了确认按钮后，页面的onSuccess方法会被触发的

 （使用组件的页面的js代码）

这就是我写的自定义弹框，大家有什么更好的方式方法可以沟通交流