微信小程序自定义弹窗组件

1. 自定义组件

• 实现效果
  
  （1）父组件调用

  • 在父组件json中导入子组件

    {
      "component": true,
      "usingComponents": {
        "alert-tip": "/components/alertTip"
      }
    }
    

  • 父组件使用：tipmsg 、 show、 single 传值给子组件

    <alert-tip tipmsg="{{tipmsg}}" show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'></alert-tip>
    

  • 接收子组件的值

    	data:{
    		tipmsg:{
          		title: '手动录入'
       		 },
      		showModal: false, // 显示modal弹窗
    	    single: false, 
    	}
      // 点击取消按钮的回调函数
      modalCancel(e) {
        // 这里面处理点击取消按钮业务逻辑
        console.log('点击了取消')
      },
      // 点击确定按钮的回调函数
      modalConfirm(e) {
        // 这里面处理点击确定按钮业务逻辑
        console.log(e.detail)
        }
    

  （2） 子组件定义：接收父组件传值

  	const app = getApp()
  	Component({
  	  properties: { // 获取父组件传值
  	    tipmsg:{
  	      type: Object,
  	      value: {},
  	      observer: function (newVal, oldVal) { }
  	    },
  	    //是否显示modal弹窗
  	    show: {
  	      type: Boolean,
  	      value: false
  	    },
  	    //控制底部是一个按钮还是两个按钮，默认两个
  	    single: {
  	      type: Boolean,
  	      value: false
  	    }
  	  },
  	  /**
  	   * 组件的初始数据
  	   */
  	  data: {
  	    tipMsg:{},
  	    disName:'',
  	  },
  	  /**
  	   * 组件的方法列表
  	   */
  	  methods: {
  	    // 点击modal的回调函数
  	    formName(e){
  	      this.setData({
  	        disName: e.detail.value
  	      })
  	    },
  	    clickMask() {
  	      // 点击modal背景关闭遮罩层，如果不需要注释掉即可
  	      this.setData({ show: false })
  	    },
  	    // 点击取消按钮的回调函数
  	    cancel() {
  	      this.setData({ show: false })
  	      this.triggerEvent('cancel')  //triggerEvent触发事件
  	    },
  	    // 点击确定按钮的回调函数
  	    confirm() {
  	      this.setData({ show: false })
  	      this.triggerEvent('confirm', this.data.disName)
  	    }
  	  }
  	})
  	
  

  <view class='modal-mask' wx:if='{{show}}'>
    <view class='modal-content'>
        <view class="titles">{{tipmsg.title}}</view>
        <view class="formItem">
         <input type="text" name="phone" placeholder='请输入您的既往病史' class='phone' value='{{disName}}' bindinput='formName'></input>
        </view>
      <!-- <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>
  

  /* 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: 84%;
    height: 440rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    text-align: center;
  }
  /*中间内容*/
  .main-content{
    flex: 1;
    height: 100%;
    overflow-y: hidden; 
    max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/
  }
  .titles{
    margin-top: 40rpx;
    font-size: 32rpx;
    font-weight: bold
  }
  /*底部按钮*/
  .modal-footer{
    display: flex;
    flex-direction: row;
    height: 96rpx;
    line-height: 96rpx;
    justify-content: space-between;
    width: 94%;
    margin: 0 auto;
    margin-top: 30rpx;
  }
  .cancel-btn, .confirm-btn{
     width:280rpx;
    height:96rpx;
    font-weight: bold;
    font-size: 32rpx;
    border-radius:46rpx;
  }
  .cancel-btn{
    color: #000;
    background:rgba(245,245,245,1); 
  }
  .confirm-btn {
    background:rgba(0,198,0,1);
    color: white;
  }
  .formItem{
    height: 100rpx;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 60rpx 0;
  }
  .phone{
    margin-left: 20rpx;
    width: 50%;
  }
  

来源：CSDN

作者：卜卦丶cc

链接：https://blog.csdn.net/qq_37896578/article/details/104671336