創(chuàng)建組件

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);
  }
}

/* 當(dāng)前彈窗樣式 */

.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: '標(biāo)題'     // 屬性初始值（可選）
    },
    // 彈窗內(nèi)容
    content: {
      type: String,
      value: '內(nèi)容'
    },
    // 彈窗取消按鈕文字
    btnNo: {
      type: String,
      value: '取消'
    },
    // 彈窗確認按鈕文字
    btnOk: {
      type: String,
      value: '確定'
    }
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    flag: true,
  },

  /**
   * 組件的方法列表
   */
  methods: {
    //隱藏彈框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示彈框
    showPopup() {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * 內(nèi)部私有方法建議以下劃線開頭
    * triggerEvent 用于觸發(fā)事件
    */
    _error() {
      //觸發(fā)取消回調(diào)
      this.triggerEvent("error")
    },
    _success() {
      //觸發(fā)成功回調(diào)
      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