小程序组件（弹窗组件以及插槽使用）

备注：小程序弹出层组件开发（）

index.js

// common/pop/pop.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    autoHide:{ // 属性名
      type: String,
      value: ''
    },
    title: { // 属性名
      type: String,
      value: ''
    },
    popOpt:{
      type:Object,
      value:{
        titleStyle:'',
        leftFlag:true,
        leftStyle:'',
        rightFlag:true,
        rightStyle:''
      },
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
        this.data.popOpt = { ...oldVal,  ...newVal  }
        this.setData({
          popOpt:this.data.popOpt
        })
        // console.log(this.data.popOpt)
      }
    },
    content: { // 属性名
      type: String,
      value: ''
    },
    lText: { // 左侧按钮text
      type: String,
      value: '取消'
    },
    rText: { // 右侧按钮text
      type: String,
      value: '确认'
    },
    confirm:{//确认回调
      type: Function,
      value: function(){}
    },
    cancel:{//取消回调
      type: Function,
      value: function(){}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow:true
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {  },
    hide: function () { 
    },
    resize: function () { },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    stop:function(){},
    show:function(){
      this.setData({
        isShow:false
      })
    },
    hide:function(){
      this.setData({
        isShow:true
      })
    },
    lClick:function(){
      //this.properties.cancel();
      this.hide();
    },
    rClick:function(){
      //this.properties.confirm();
      this.triggerEvent('confirm')
     if( this.properties.autoHide==""){
      this.hide();
     }
    }
  }
})

index.json

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

<!--common/pop/pop.wxml-->
<view class="common-pop" hidden="{{isShow}}" catchtouchmove="stop" >
  <!-- <view class="bgbg" catchtouchmove="stop" ></view> -->
    <view class="common-pop-center">
      <view class="common-pop-body">
          <slot name="top"></slot>
          <view class="common-pop-title" wx:if="{{title}}" style="{{popOpt.titleStyle}}">{{title}}</view>
          <view class="common-pop-content">{{content}}</view>
          <slot name="bottom"></slot>
      </view>

      <view class="common-pop-btn">
        <view class="common-pop-l-btn" wx:if="{{popOpt.leftFlag}}" style="{{popOpt.leftStyle}}" bindtap="lClick">{{lText}}</view>
        <view class="common-pop-r-btn" wx:if="{{popOpt.rightFlag}}" style="{{popOpt.rightStyle}}" bindtap="rClick">{{rText}}</view>
        <slot name="btn"></slot>
      </view>
    </view>
</view>

index.wxss

/* common/pop/pop.wxss */

.common-pop{
  position: relative;
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0,0,0,0.4);
}
.bgbg{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.common-pop-center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 640rpx;
  border-radius: 16rpx;
  background-color: #fff;
}
.common-pop-btn{
  border-top: 1px solid #F5F7FA;
  display: flex;
}
.common-pop-body{
  padding: 40rpx 30rpx;
}
.common-pop-title{
  margin-top: 10rpx;
  margin-bottom: 50rpx;
  text-align: center;
  color:#666;
  font-size: 28rpx;
  font-weight: normal;
}
.common-pop-content{
  color:#666666;
  font-size: 28rpx;
}

.common-pop-l-btn,.common-pop-r-btn{  
  flex: 1;
  height: 120rpx;
  text-align: center;
  line-height: 120rpx;
}
.common-pop-l-btn{  
  font-size: 32rpx;
  color: #000;
  border-right: 1px solid #F5F7FA;

}
.common-pop-r-btn{  
  font-size: 32rpx;
  font-weight: bold;
  color: #FE4561;
  flex: 1;
}



.common-pop-bg{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

在需要使用的页面json文件引入

{
  "usingComponents": {
    "my-pop": "/pages/components/pop/pop"
  }
}

在需要使用的页面wxml文件引入（这里有插槽的使用）

<my-pop id="checkpop" content="" popOpt="{{popOpt}}" title="作品提交状态说明" rText="我知道了" bindconfirm="delConfirm" >
  <view slot="bottom" class="checkPopCount">
    <view class="zheDang"></view>
    <scroll-view scroll-y="true" class="checkPop_scroll">
      <view class="checkPop_item">1. 请确保你在美图秀秀APP发布作品的账号和绑定的美图ID是同一个。</view>
      <view class="checkPop_item">2. 发布作品最后一步需要添加指定话题标签。</view>
      <view class="checkPop_item"> 3. 如果你的操作不满足以上两点，可直接进入美图秀秀APP按照注意事项重新发布作品。</view>
      <view class="checkPop_item"> 4. 如果你的操作满足以上两点，并且在美图秀秀APP发布作品后的5分钟仍没有显示提交成功状态，可能与美图秀秀APP的审核机制有关，请继续等待，3小时内会返回最终结果。</view>
    </scroll-view>
  </view>
</my-pop>

在相应的js文件中根据 id 初始化

  this.checkpop = this.selectComponent("#checkpop");

初始化过后 根据自己自定义的方法进行调用

 this.checkpop.show()