微信小程序自定义组件实现类似Modal的弹框-蒲公英云

微信小程序自定义组件实现类似Modal的弹框

效果展示：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70

思路：

在项目中，我们会遇到这样的情况，以上的的弹框都是类似的，我们不需要每个页面都写个弹框+背景。这样很是麻烦和繁琐。

不如我们拆分成这样，弹框（组件）+弹框内容（slot）。

组件代码：

.wxml：

<!-- 弹框组件,类似 Modal -->
<block wx:if="{
   {isShowInvite}}">
  <cover-view class="alert_bg" bindtap="_alertClose"></cover-view>
  <cover-view class="alert_invite_wrap">
    <cover-view class="alert_invite">
      <cover-view class="alert_invite_tit">{
   {title}}</cover-view>
      <slot name="rules"></slot>
      <slot name="twobutton"></slot>
      <cover-view class="bottom_tit">{
   {bottomTxt}}</cover-view>
    </cover-view>
    <cover-image src="{
   {iconClose}}" class="icon_close" bindtap="_alertClose"></cover-image>
  </cover-view>
</block>

.wxss：

.alert_bg{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,.8);
  z-index: 99999;
}
.alert_invite_wrap{
  width: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999999;
}
.alert_invite{
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  padding:50rpx;
  box-sizing: border-box;
  overflow: initial;
}
/* .alert_invite_txt{
  width: 100%;
  font-size: 26rpx;
  color: #444444;
  line-height: 25px;
  white-space: pre-wrap;
  margin-bottom: 75rpx;
} */
.alert_invite_tit{
  font-weight: bold;
  font-size: 40rpx;
  color: #333333;
  margin-bottom: 55rpx;
}
.invite_btn{
  width: 100%!important;
  height: 80rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  background: #ffcc21;
  border-radius: 50rpx;
  font-size: 30rpx;
  color: #444444;
}
.icon_close{
  width: 80rpx;
  height: 80rpx;
  margin:0 auto;
  margin-top: 80rpx;
}
.bottom_tit{
  font-size: 26rpx;
  color: #444444;
  text-align: center;
}

.js:

Component({
  data: {
    iconClose: 'http://39.105.134.221:8080/test/source1.png' //需要后端将icon_close_white放在服务器上，这个暂时用播放的
  },
  options:{
    multipleSlots: true
  },
  properties: {
    title: {
      type: String,
      value: '邀请获下载券'
    },
    isShowInvite: {
      type: Boolean,
      value: false
    },
    bottomTxt:{
      type:String,
      value:''
    },
  },
  methods: {
    _alertClose() {
      this.setData({
        isShowInvite: false
      })
    }
  }
})

pages页面使用该组件：

<alert-invite-rules id="inviteRules" title="没有下载券了" isShowInvite="{
   {isShowInvite}}">
    <view slot="rules">
      <view class="alert_invite_txt">{
   {couponTxt}}</view>
    </view>
    <view slot="twobutton">
      <button class="invite_btn" style="bottom:20px" hover-class="none">￥1买整套</button>
      <button class="invite_btn invite_btn_gray" hover-class="none" open-type="share">邀请获券</button>
    </view>
  </alert-invite-rules>