微信小程序自定义模态框

模态框内容部分自定义内容

页面调用模态框组件代码

HTML

<popup bind:pConfirm='pConfirm' show='{{show}}'>
    <view style="display: flex;justify-content: center;margin-top:40rpx">自定义内容</view>
</popup>

JS

Page({
  data: {
    show:'none'
  },
//控制模态框显示
  showPopup(){
    this.setData({
      show:"block"
    })
  },
  //模态框确定方法
  pConfirm(){
    console.log('外部方法')
  },
  
  onLoad() {
    
  },
})

组件代码
HTML

<view class="p-mask" style="display:{{updateShow}}" catchtouchmove="{{true}}"></view>
<view class="p-update" style="display:{{updateShow}};transform:{{scale}};height:{{height}}rpx;width:{{width}}rpx" catchtouchmove="{{true}}">
    <slot></slot>
    <view class="p-wrap">
        <view class="p-btn-1" bindtap='close'>取消</view>
        <view class="p-btn-2" bindtap='confrim'>确定</view>
    </view>
</view>

CSS

.p-mask {
    background-color: black;
    opacity: .3;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 100;
}
.p-update  {
    background-color: white;
    position: fixed;
    z-index: 101;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 614rpx;
    height: 436rpx;
    border-radius: 26rpx;
    font-size: 32rpx;
    box-sizing: border-box;
    box-shadow: 0 0 30rpx 2rpx rgb(151, 149, 149);
    transition: .2s ease all;
    overflow: hidden;
}
.p-wrap {
    width: 100%;
    height: 106rpx;
    position: absolute;
    bottom: 0;
    border-top: 1rpx solid #EBEDF5;
    box-sizing: border-box;
    display: flex;
}
.p-btn-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
    border-right: 1rpx solid #EBEDF5;
}
.p-btn-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
}

JS

Component({
  // 启用插槽
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: String,
      value: 'none'
    },
    //弹框高度
    height: {
      type: String,
      value: '436'
    },
    //宽度
    width:{
      type:String,
      value:'614'
    }
  },
  observers: {
    'show'(data) {
      if (data == 'none'){
        this.setData({
          updateShow:data
        },_=>{
          return
        })
      }
      this.setData({
        updateShow: data
      }, _ => {
        this.setData({
          scale: 'scale(1)'
        })
      })
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    scale: 'scale(0)',
    updateShow: 'none'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    confrim(){
      this.triggerEvent('pConfirm')
    },
    close() {
      this.setData({
        scale: 'scale(0)'
      }, _ => {
        this.setData({
          updateShow: 'none'
        })
      })
    },
  }
})