微信小程序实现自定义modal弹窗封装的方法

为了实现微信小程序中自定义的弹窗效果，可以使用组件化的方法进行封装。

第一步：创建组件文件

在小程序项目中创建一个组件文件夹，例如 components，并在其中创建一个名为 modal 的文件夹。在 modal 文件夹中创建以下文件：

• modal.wxml：用于定义弹窗的结构，例如标题、内容、按钮等。
• modal.wxss：用于定义弹窗的样式，例如背景色、字体大小、边框等。
• modal.js：用于控制弹窗的行为，例如显示、隐藏、按钮点击等。
• index.js：用于将组件注册到全局。

第二步：编写弹窗结构

在 modal.wxml 中定义弹窗的结构，例如：

<view class="modal-mask">
  <view class="modal-wrapper">
    <view class="modal-header">
      <text>{{title}}</text>
    </view>
    <view class="modal-body">
      <slot></slot>
    </view>
    <view class="modal-footer">
      <button class="modal-btn-confirm" bindtap="confirm">
        {{confirmText}}
      </button>
      <button class="modal-btn-cancel" bindtap="cancel">
        {{cancelText}}
      </button>
    </view>
  </view>
</view>

在弹窗中使用了一个插槽（slot），可以用于显示弹窗的内容。

第三步：编写弹窗样式

在 modal.wxss 中定义弹窗的样式，例如：

.modal-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400rpx;
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;
}

.modal-header {
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
}

.modal-body {
  padding: 20rpx;
  font-size: 32rpx;
}

.modal-footer {
  display: flex;
  justify-content: center;
}

.modal-btn-confirm {
  margin-right: 20rpx;
  padding: 10rpx 30rpx;
  background: #1aad19;
  color: #fff;
  font-size: 28rpx;
  border-radius: 8rpx;
}

.modal-btn-cancel {
  padding: 10rpx 30rpx;
  background: #eee;
  color: #333;
  font-size: 28rpx;
  border-radius: 8rpx;
}

根据需要可以调整弹窗的样式。

第四步：编写弹窗逻辑

在 modal.js 中定义弹窗的逻辑，例如：

Component({
  properties: {
    title: {
      type: String,
      value: '提示'
    },
    confirmText: {
      type: String,
      value: '确定'
    },
    cancelText: {
      type: String,
      value: '取消'
    },
    visible: {
      type: Boolean,
      value: false,
      observer: function(newVal) {
        if (newVal) {
          this.setData({
            animation: 'modal-show'
          })
        } else {
          this.setData({
            animation: 'modal-hide'
          })
        }
      }
    }
  },
  methods: {
    confirm: function() {
      this.setData({
        visible: false
      })
      this.triggerEvent('confirm')
    },
    cancel: function() {
      this.setData({
        visible: false
      })
      this.triggerEvent('cancel')
    }
  }
})

在组件的 properties 中定义了弹窗的配置项，包括标题、确认按钮文本、取消按钮文本、是否可见等。在 observer 函数中监听 visible 属性的变化，根据变化控制弹窗的显示和隐藏。

在 methods 中定义了确认和取消按钮的点击事件，触发了对应的自定义事件（confirm 和 cancel）。

第五步：注册组件

在 index.js 中注册组件，例如：

import Modal from './modal'

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    title: {
      type: String,
      value: '提示'
    },
    confirmText: {
      type: String,
      value: '确定'
    },
    cancelText: {
      type: String,
      value: '取消'
    }
  },
  methods: {
    showModal: function() {
      this.setData({
        visible: true
      })
    }
  },
  // 将组件注册到全局
  attached: function() {
    wx._modal = this.selectComponent('.modal')
  }
})

wx.Modal = Modal

在组件的 attached 函数中将组件注册到全局，这样就方便在其他页面中使用自定义的弹窗组件。同时在 methods 中定义 showModal 函数，用于显示弹窗。

示例

以下是使用自定义弹窗组件的示例：

wx.Modal({
  title: '提示',
  content: '这是一个弹窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

上述示例中，调用 wx.Modal 函数显示弹窗，设置了弹窗的标题和内容，并在确认和取消按钮点击后分别触发了回调函数。

另一个示例是：

<modal visible="{{visible}}" title="提示" confirm-text="确定" cancel-text="取消" bindconfirm="onConfirm" bindcancel="onCancel">
  是否删除这个记录？
</modal>

在页面中引入自定义的弹窗组件，在 modal 标签中设置弹窗的配置项，包括标题、按钮文本、内容以及确认和取消按钮点击后触发的事件。设置了 visible 属性控制弹窗的显示和隐藏。