modal-upgrade/modal-upgrade/index.js

微信小程序弹框组件，支持全屏展示与各种自定义

// components/modal/modal.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  options: {
    multipleSlots: true
  },
  /**
   * 组件的初始数据
   */
  data: {
    modalShow: false,
    opacity: 0,
    zIndex: -10,
    title: "",
    content: "",
    cancelText: "",
    submitText: "",
    confirmColor: "#F3627B",
    cancelColor: "#999999",
    data: {},
    submitBackground: "",
    textAlign: "",
    type: 'text',
    timer: "",
    timerSetInterval: "",
    modal: "",
    showCancel: true,
    file: false,
    backgroundColor: "#fff",
    showSubmit: true,
    showFooter: true,
    conterHtml: ``,
    shade: true,
    asyncEsl: false,
    loadingColor: "white",
    btnHeight:"88"
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showModel(data) {
      this.setData({  asyncEsl:false, data:{} })
      this.data.modal = this.showModal(data)
      this.data.modal.next()
      this.data.modal.next()
    },
    showModal: function* (data) {
      if (!data.data) {
        data.data = {}
        data.data.confirm = false
        data.data.cancel = false
        data.data.hidden = false
        data.data.loadingSync = false
      }
      this.show()
      yield this.setData({
        title: data.title,
        shade: data.shade ? data.shade : true,
        content: data.content,
        btnHeight:data.btnHeight ? data.btnHeight : "88",
        loadingColor: data.loadingColor ? data.loadingColor : 'white',
        loadingSize: data.loadingSize ? data.loadingSize : "40",
        conterHtml: data.conterHtml ? data.conterHtml : "",
        submitBackground: data.submitBackground ? data.submitBackground : "linear-gradient(300deg,rgba(81,166,255,1) 0%,rgba(167,218,255,1) 100%)",
        cancelBackground: data.cancelBackground ? data.cancelBackground : "#FFF",
        cancelText: data.cancelText ? data.cancelText : "取消",
        submitText: data.submitText ? data.submitText : "确定",
        confirmColor: data.confirmColor ? data.confirmColor : "#fff",
        cancelColor: data.cancelColor ? data.cancelColor : "#999999",
        showCancel: data.showCancel == undefined ? true : data.showCancel,
        data: data.data,
        zIndex: data.zIndex ? data.zIndex : '1102',
        showFooter: data.showFooter ? true : data.showFooter,
        showSubmit: data.showSubmit ? true : data.showSubmit,
        backgroundColor: data.backgroundColor ? data.backgroundColor : "#fff",
        file: data.file ? data.file : false,
        type: data.type ? data.type : "text",
        textCenter: data.textCenter ? data.textCenter : "center",
        timer: data.timer ? '(' + data.timer + ')' : ""
      })
      this.data.asyncEsl = data.asyncEsl
      this.data.data = new Proxy({}, {
        get: function (target, key, receiver) {
          // data.watch(target,key)
          return Reflect.get(target, key, receiver);
        },
        set: (target, key, value, receiver) => {
          data.watch(target, key, value)
          if (key == 'loadingSync' && value) {
            this.setData({
              opacity: 0,
              zIndex: -10
            })
          }
          return Reflect.set(target, key, value, receiver);
        }
      });
      if (data.timer) {
        this.data.timerSetInterval = setInterval(() => {
          this.setData({
            timer: '(' + --data.timer + ')'
          })
          if (data.timer <= 0) {
            this.hidden()
          }
        }, 1000);
      }
      yield data.showSuccess ? data.showSuccess(this.data.data) : ""
      yield data.success ? data.success(this.data.data) : ""
    },
    show() {
      this.setData({
        opacity: 1,
        zIndex: 1102
      })
    },
    hidden() {
      this.setData({
        opacity: 0,
        zIndex: -10
      })
      clearInterval(this.data.timerSetInterval)
      this.data.data.hidden = true
      this.data.modal.next()
    },
    yes(data) {
      if (this.data.asyncEsl) {
        this.setData({
          asyncEsl: this.data.asyncEsl
        })
      } else {
        this.setData({
          opacity: 0,
          zIndex: -10
        })
      }
      clearInterval(this.data.timerSetInterval)
      this.data.data.confirm = true
      this.data.modal.next()
    },
    no() {
      this.setData({
        opacity: 0,
        zIndex: -10
      })
      clearInterval(this.data.timerSetInterval)
      this.data.data.cancel = true
      this.data.modal.next()
    }
  }
})