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

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

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();
     }
    }
  }
})

View Code

<view class="common-pop" hidden="{{isShow}}" catchtouchmove="stop" >  <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>

/* 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%; }

<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>

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

相关推荐