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

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

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