自定义封装小程序模态框 （modal）

效果图

代码如下

modal 组件中

• wxml 部分

<view class="mask" wx:if="{
    
    {show}}" bindtap="clickMask"></view>
<view class="modal-wrapper" wx:if="{
    
    {show}}">
  <view class="modal-content" style="height:356rpx">
    <view class="main-content">
      <view class="title">提示</view>
      <view class="content-txt">
        <slot></slot>
      </view>
    </view>
    <view class="modal-btn-wrapper">
      <button wx:if="{
    
    {showCancelBtn}}" class="cancel-btn" bindtap="cancel">取消</button>
      <button class="confirm-btn" bindtap="confirm">确认</button>
    </view>
  </view>
</view>

• wxss 部分

.mask{
    
    
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.4);
   z-index: 99999;
}
.modal-wrapper {
    
    
  position: absolute;
  width: 100%;
  z-index: 100000;
  display: flex;
  justify-content: center;
  top: 30vh;
}
.modal-content{
    
    
  display: flex;
  flex-direction: column;
  width: 85.34%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 40rpx;
  box-sizing: border-box;
  text-align: center;
}
.main-content{
    
    
  flex: 1;
}
.main-content .title {
    
    
  font-size: 32rpx;
  font-weight: 600;
  color: #000000;
}

.main-content .content-txt {
    
    
  font-weight: 400;
  color: #4A4A4A;
  margin-top: 36rpx;
}

.modal-btn-wrapper{
    
    
  display: flex;
  height: 88rpx;
  font-weight: 600;
  line-height: 88rpx;
  color: var(--themeColor);
  /* justify-content: space-between; */
  justify-content: space-around;
}

.cancel-btn, .confirm-btn{
    
    
  text-align: center;
  font-size: 32rpx;
  width: 212rpx;
  height: 88rpx;
  border-radius: 12rpx;
  color: var(--themeColor);
  border: 2rpx solid var(--themeColor);
}

.confirm-btn {
    
    
  color: #fff;
  background-color: var(--themeColor);
}

• js 部分

Component({
    
    
  properties: {
    
    
    // 是否显示modal
    show: {
    
    
      type: Boolean,
      value: false
    },
    // 自定义标题
    title: {
    
    
      type: String,
      value: '确认删除此数据吗？'
    },
    // 是否显示取消按钮（默认显示）
    showCancelBtn: {
    
    
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
    },

  /**
   * 组件的方法列表
   */
  methods: {
    
    
    clickMask() {
    
    
      // 点击遮罩层关掉modal
      // this.setData({
    
    show: false})
    },

    cancel() {
    
    
      this.setData({
    
     show: false })
      this.triggerEvent('cancel')
    },

    confirm() {
    
    
      this.setData({
    
     show: false })
      this.triggerEvent('confirm')
    }
  }
})

• json 部分

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

父组件中

• wxml 部分

<modal show="{
    
    {showModal}}" bindconfirm='modalConfirm'>确定删除吗？</modal>

• js 部分

Page({
    
    
  /**
   * 页面的初始数据
   */
  data: {
    
    
    showModal: true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    

  },
  modalConfirm() {
    
    
    console.log('确定了');
  },
  modalCancel() {
    
    
    console.log('取消了')
  }
})

• json 部分

{
    
    
  "usingComponents": {
    
    
    "modal": "/component/modal/modal"
  },
  "navigationBarTitleText": "modal"
}