微信小程序--自定义modal弹窗封装实现（slot的使用）

转载自：https://blog.csdn.net/solocoder/article/details/80696752

一、创建组件modal

1、modal.wxml

<view class='mask' wx:if='{{show}}'>
  <view class='modal-content'>
     <view class='main-content'>
      <slot></slot>
    </view>
    <view class='modal-btn-wrapper'>
      <view class='cancel-btn'  bindtap='cancel'>取消</view>
      <view class='confirm-btn'  bindtap='confirm'>{{btntxt}}</view>
    </view>
  </view>
</view>

2、modal.js

/**
 * 自定义modal浮层
 * 使用方法：
 * <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
     <view>你自己需要展示的内容</view>
  </modal>

  属性说明：
  show： 控制modal显示与隐藏
  height：modal的高度
  bindcancel：点击取消按钮的回调函数
  bindconfirm：点击确定按钮的回调函数
 */

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal
    show: {
      type: Boolean,
      value: false
    },
    //modal的高度
    height: {
      type: String,
      value: ''
    },
    
    btntxt: {
      type: String,
      value: '确定'
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    
    cancel() {
      this.setData({ show: false })
      this.triggerEvent('cancel')
    },

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

Js 代码也很简单，在 properties 中定义两个需传入的属性 show 和 height ，并指定默认值。
在 methods 中写点击取消和确定按钮的回调，点击按钮后先通过 this.setData({ show: false }) 将 modal 隐藏掉，再通过 this.triggerEvent(‘confirm’) 将点击事件传递出去。
3、modal.json
json 主要是声明 modal 为组件

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

4、modal.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: 9999;
}

.modal-content{
  display: flex;
  flex-direction: column;
  width: 90%;
  /* height: 80%; */
  background-color: #fff;
  border-radius: 10rpx;
}

.modal-btn-wrapper{
  display: flex;
  flex-direction: row;
  height: 100rpx;
  line-height: 100rpx;
  border-top: 2rpx solid rgba(7,17,27,0.1);
}

.cancel-btn, .confirm-btn{
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
}

.cancel-btn{
  border-right: 2rpx solid rgba(7,17,27,0.1);
  color:rgba(7,17,27,0.6);
}
.confirm-btn{
  color:#07C160;
}

.main-content{
  flex: 1;
  height: 100%;
  overflow-y: hidden; 
}

二、使用组件

1、index.json

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

2、index.wxml

	<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>		
		<view class='modal-content'>
			<view class="modal-wrap">
				<view class="modal-wrap-title">请输入货位名称</view>
				<textarea class="modal-wrap-txt" placeholder="点击输入货位" value="{{dizhi}}" placeholder-class="ph" auto-focus="true" maxlength='150' bindinput="textareaChange" />
				</view>
  </view>
</modal>

上面的代码简化一下就是

<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
   <view class='modal-content'>自己的布局</view>
</modal>

在modal中定义了 slot，所以可以将需要展示的任何布局包裹在 modal 中。
自己的布局用一个 view 包起来放到 modal 标签里即可。