微信小程序模拟wx.showModal封装弹框组件

一、组件的wxml

弹窗






  
    
  
  我是封装的弹框
  
    
  
  
    封装的弹框
  
  
    取消
    确定

二、组件的wxss

.show-btn {
  margin-top: 100rpx;
  color: #22cc22;
}

.toast-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.toast-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  margin: -180rpx 105rpx;
  border-radius: 16rpx;
}

.toast-icon {
  position: absolute;
  right: 32rpx;
  top: 32rpx;
}

.toast-icon image {
  width: 32rpx;
  height: 32rpx;
}

.toast-title {
  padding-top: 47rpx;
  font-size: 32rpx;
  color: #222;
  text-align: center;
}

.toast-image {
  margin-top: 35rpx;
  text-align: center;
  width: 100%;
}

.toast-content {
  font-size: 28rpx;
  text-align: center;
  margin-top: 41rpx;
  margin-bottom: 35rpx;
  color: #222;
}

.toast-text {
  font-size: 28rpx;
  text-align: center;
  margin-top: 41rpx;
  margin-bottom: 35rpx;
  color: #666;
}


.toast-footer {
  display: flex;
  flex-direction: row;
  height: 94rpx;
  border-top: 1px solid #dedede;
  line-height: 94rpx;
}

.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}

.btn-confirm {
  width: 50%;
  color: #01A670;
  text-align: center;
}

三、组件的js

// components/toast/index.js
Component({
  /**
   * 组件的初始数据
   */

  data: {
    showModal: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showDialogBtn: function () {
      this.setData({
        showModal: true
      })
    },
    /**
     * 隐藏模态对话框
     */
    hideModal: function () {
      this.setData({
        showModal: false
      });
    },

    /**
     * 对话框取消按钮点击事件
     */
    onCancel: function () {
      this.hideModal();
    },

    /**
     * 对话框确认按钮点击事件
     */
    onConfirm: function (e) {
      this.hideModal();
    }
  }
})