微信小程序自定义modal弹窗组件的方法详解

<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'>
 <view class='modal-content'>
 <scroll-view scroll-y class='main-content'>
  <slot></slot>
 </scroll-view>
 <view class='modal-footer'>
  <view wx:if='{{!single}}' class='cancel-btn' bindtap='cancel'>取消</view>
  <view class='confirm-btn' bindtap='confirm'>确定 </view>
 </view>
 </view>
</view>

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

/* components/modal/modal.wxss */
/*遮罩层*/
.modal-mask{
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background-color: rgba(0,0,0,0.5);
 z-index: 999;
}
/*遮罩内容*/
.modal-content{
 display: flex;
 flex-direction: column;
 width: 80%;
 background-color: #fff;
 border-radius: 10rpx;
 padding: 20rpx;
 text-align: center;
}
/*中间内容*/
.main-content{
 flex: 1;
 height: 100%;
 overflow-y: hidden; 
 max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/
}
/*底部按钮*/
.modal-footer{
 display: flex;
 flex-direction: row;
 height: 80rpx;
 line-height: 80rpx;
 border-top: 2rpx solid #D2D3D5;
 margin-top: 30rpx;
}
.cancel-btn, .confirm-btn{
 flex: 1;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 32rpx;
}
.cancel-btn{
 color: #000;
 border-right: 2rpx solid #D2D3D5;
}
.confirm-btn {
 color: #09BA07
}

Component({
 /**
 * 组件的属性列表
 */
 properties: {
 //是否显示modal弹窗
 show: {
  type: Boolean,
  value: false
 },
 //控制底部是一个按钮还是两个按钮，默认两个
 single: {
  type: Boolean,
  value: false 
 }
 },

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

 },

 /**
 * 组件的方法列表
 */
 methods: {
 // 点击modal的回调函数
 clickMask() {
  // 点击modal背景关闭遮罩层，如果不需要注释掉即可
  this.setData({show: false})
 },
 // 点击取消按钮的回调函数
 cancel() {
  this.setData({ show: false })
  this.triggerEvent('cancel') //triggerEvent触发事件
 },
 // 点击确定按钮的回调函数
 confirm() {
  this.setData({ show: false })
  this.triggerEvent('confirm')
 }
 }
})

{
	"usingComponents": {
 		"modalView": "../../components/modal/modal"
	}
}

<view>
 <!-- modal弹窗-->
 <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'>
 <view class='modal-content'>
  <scroll-view scroll-y class='main-content'>
  <view>这里面可替换成你想显示的其他内容</view>
  <view>这里面可替换成你想显示的其他内容</view>
  <text>这里面可替换成你想显示的其他内容</text>
  </scroll-view>
 </view>
 </modalView>
</view>

Page({

 /**
 * 页面的初始数据
 */
 data: {
 showModal: true, // 显示modal弹窗
 single: false // false 只显示一个按钮，如果想显示两个改为true即可
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },
 // 点击取消按钮的回调函数
 modalCancel(e) {
 // 这里面处理点击取消按钮业务逻辑
 console.log('点击了取消')
 },
 // 点击确定按钮的回调函数
 modalConfirm(e) {
 // 这里面处理点击确定按钮业务逻辑
 console.log('点击了确定')
 }
})