微信小程序底部弹框-组件封装

底部弹框，遮罩层淡入淡出，弹框高度根据内容自适应。
直接上代码

<!-- modal.wxml -->
<view class="wrap" hidden="{{!myVisible}}">
  <view class="mask {{visible ? 'mask-show' : ''}}" bindtap="_onCancel"></view>
  <view class="box" id="modal-box" animation="{{animationData}}">
    <slot />
  </view>
</view>

//modal.js
Component({
  properties: {
    myVisible: {
      type: Boolean,
      value: false,
      observer: '_visibleChange',
    },
  },

  data: {
    visible: false,
    animation: null,
    animationData: null,
  },

  ready: function () {
    const animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
    });
    this.setData({
      animation,
    })
  },

  methods: {
    _visibleChange: function (newVal, oldVal, changedPath) {
      if (oldVal === false && newVal === true) {
        setTimeout(function () {
          this._onShow();
        }.bind(this), 0)
      }
    },

    _onShow: function () {
      const __this = this;
      const query = wx.createSelectorQuery().in(this);
      query.select('#modal-box').boundingClientRect(function (res) {
        const { animation } = __this.data;
        animation.translateY(-res.height).step();
        __this.setData({
          visible: true,
          animationData: animation.export(),
        })
      }).exec();
    },
    
    _onCancel: function () {
      const { animation } = this.data;
      animation.translateY(0).step();
      this.setData({
        visible: false,
        animationData: animation.export(),
      })
      setTimeout(function () {
        this.triggerEvent('myOnCancel');
      }.bind(this), 200)
    },

  },
})

/* modal.wxss */
.wrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: 0.2s;
}
.mask-show {
  opacity: 0.4;
}

.box {
  position: fixed;
  top: 100vh;
  left: 0;
  z-index: 2;
  width: 100%;
  min-height: 100rpx;
  background: #fff;
}

//modal.json（这句话需要删了，这里仅为注释）
{
  "component": true,
  "usingComponents": {}
}

测试用例

<button
  bindtap="handleShow"
>
  test modal show
</button>
<modal
  myVisible="{{visible}}"
  bindmyOnCancel="handleCancle"
>
  123
</modal>

Page({
  data: {
    visible: false,
  },

  handleShow: function () {
    this.setData({ visible: true });
  },

  handleCancel: function () {
    this.setData({ visible: false });
  },
})

{
  "usingComponents": {
    "modal": "/components/modal/modal"
  },
  "navigationBarTitleText": "demo"
}

whosMeya