小程序 封装对话框

创建组件

component.png

组件 wxml

<!-- 弹窗遮罩层 -->
        <view class='shade' hidden="{{flag}}">
        </view>

        <!-- 弹窗 -->
        <view class='shade_box popup' hidden="{{flag}}">
            <view class="lock-ico">
                <image src="/images/match/lock.png"></image>
            </view>

            <view class="shade_box_bg">
                <view class='content'>{{title}}</view>
                <view class="sure_btn" bindtap='_success'>
                    <button>确定</button>
                </view>
                <image src="/images/match/ty.png" id="ty"></image>
            </view>

            <view class="close_btn" bindtap='_error'>
                <image src="/images/match/close.png" class='msg'></image>
            </view>
        </view>

组件 wxss

/* 弹窗遮罩 */

.shade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

.shade_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 11;
  box-sizing: border-box;
  letter-spacing: 0;
  word-wrap: break-word;
  animation-name: popup;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
}

@keyframes popup {
  from {
    opacity: 0;
    transform: scale(0.3, 0.3);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* 当前弹窗样式 */

.popup {
  width: 524rpx;
  height: 624rpx;
}

.shade_box_bg {
  width: 524rpx;
  height: 424rpx;
  position: relative;
  overflow: hidden;
  border-radius: 10rpx;
  margin-top: 20%;
  z-index: 20;
}

#ty {
  width: 524rpx;
  height: 424rpx;
}

.popup .content {
  margin: 40rpx 80rpx;
  font-size: 26rpx;
  text-align: center;
  color: #3a3a3a;
  position: absolute;
  margin-top: 190rpx;
}

.lock-ico, .lock-ico image {
  width: 202rpx;
  height: 202rpx;
  z-index: 100;
  position: absolute;
  margin: 20rpx auto;
}

.lock-ico {
  width: 100%;
  display: flex;
  justify-content: center;
}

.popup button {
  color: #c36d16;
  background-color: #ffc000;
  width: 452rpx;
  height: 86rpx;
  position: absolute;
  bottom: 0;
  margin-bottom: 40rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
  line-height: 86rpx;
}

.sure_btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.close_btn, .close_btn image {
  z-index: 100;
  position: absolute;
}

.close_btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.close_btn image {
  width: 58rpx;
  height: 58rpx;
  margin-top: 30rpx;
}

js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填）
      value: '标题'     // 属性初始值（可选）
    },
    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },
    // 弹窗取消按钮文字
    btnNo: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    btnOk: {
      type: String,
      value: '确定'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup() {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _error() {
      //触发取消回调
      this.triggerEvent("error")
    },
    _success() {
      //触发成功回调
      this.triggerEvent("success");
    }
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

页面引用组件

json中

"usingComponents": {
  "show_dialog": "/component/custom-dialog/index"
}

wxml

  <view class="submit-btn" bindtap='nextBtn'>
</view>
<show_dialog id='showModal' title='您一次最多只能选择4个场地哦~' bind:error='no' bind:success="yes">
  </show_dialog>

js

onShow: function() {
    this.show_dialog = this.selectComponent("#showModal");
  },
//弹窗——显示按钮
  nextBtn() {
    this.show_dialog.showPopup();
  },
  //弹窗——确认事件
  yes() {
    this.show_dialog.hidePopup();
  },
  //弹窗——确认事件
  no() {
    this.show_dialog.hidePopup();
  }

效果

TIM截图20190812175411.png