c-popup.cml

<template>
  <view>
    <view c-if="{{show}}" class="c-popup" style="{{containerStyle}}">
      <view class="{{maskClass}}" c-bind:tap="closeevent"></view>
      <!-- c-catch禁止事件冒泡 -->
      <view class="c-popup-content" style="{{contentStyle}}" c-catch:tap="contentTap">
        <slot></slot>
      </view>
    </view>
  </view>
</template>
<script>
  import cml from 'cml-quickapp-api';
  // const createAnimation = cml.createAnimation;

  class CPopup implements CPopupInterface {
    props = {
      mask: {
        type: Boolean,
        default: true
      },
      show: {
        type: Boolean,
        default: false
      },
      center: {
        type: Boolean,
        default: true
      },
      position: {
        type: String,
        default: ''
      }
    };

    data = {
      // animationData: createAnimation()
    };

    computed = {
      maskClass() {
        console.log("maskClass", this.mask)
        return this.mask ? "has-mask" : "no-mask";
      },
      containerStyle() {
        let s = '';

        if (this.center) {
          s += 'align-items:center;justify-content:center;'
        }

        return s
      },
      contentStyle() {
        let style = "position: absolute;left:0;right:0;top:0;bottom:0;";
        switch (this.position) {
          case 'top':
            style = style.replace('bottom:0;', 'display:flex;flex-direction:column;');
            break;
          case 'right':
            style = style.replace('left:0;', 'display:flex;flex-direction:row;');
            break;
          case 'bottom':
            style = style.replace('top:0;', 'display:flex;flex-direction:column;');
            break;
          case 'left':
            style = style.replace('right:0;', 'display:flex;flex-direction:row;');
            break;
          default:
            style = "position:relative;display:flex";
            break;
        }
        return style;
      }
    }

    watch = {
      // show(newV, oldV) {
      //   if (newV) {
      //     this.showMask()
      //   } else {
      //     this.hideMask()
      //   }
      // }
    };

    methods = {
      closeevent() {
        console.log("closeevent")
        this.$cmlEmit("close");
      },
      contentTap() {},
      showMask() {
        // this.animationData = createAnimation()
        //     .opacity(0.4)
        //     .backgroundColor('#25262d')
        //     .step({
        //         duration: 300,
        //         timingFunction: 'linear',
        //         delay: 0
        //     })
        //     .export()
      },
      hideMask() {
        // this.animationData = createAnimation()
        //     .opacity(0)
        //     .step({
        //         duration: 300,
        //         timingFunction: 'linear',
        //         delay: 0
        //     })
        //     .export()
      }
    }
  }

  export default new CPopup();
</script>
<style scoped>
  .c-popup {
    position: fixed;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
  }

  .has-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(37, 38, 45, .4);
  }

  .no-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>
<script cml-type="json">
  {
    "base": {
      "component": true
    }
  }
</script>