mpx开发微信小程序实现回复组件

效果

组件内容：

<template>
  <view class="apply-component">
    <van-popup
      bind:close="onClose"
      bind:click-overlay="onClose"
      position="bottom"
      show="{{ showPopup }}"
    >
      <view class="apply-content">
        <view catchtap="onClose" class="text-tip">{{ cnContent.length }}/100</view>
        <view class="keyboard-text">
          <textarea
            placeholder-class="placeholder-text"
            show-confirm-bar="{{false}}"
            maxlength="{{100}}"
            bindinput="setInputVal"
            value="{{cnContent}}"
            class="apply-textarea"
            auto-height
            cursor-spacing="{{22}}"
            placeholder="{{placeholder}}"
            focus="{{focus}}"
          />
          <view class="btn-area">
            <view class="send-btn" catchtap="bindButtonTap">
              发送
            </view>
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'
  
  createComponent({
    properties: {
      showPopup: {
        type: Boolean,
        value: false
      },
      placeholder: {
        type: String,
        value: '请发表你的留言哦~'
      }
    },
    data: {
      focus: false,
      cnContent: ''
    },
    watch: {
      showPopup(newVal, oldVal) {
        if (newVal) {
          setTimeout(() => {
            this.focus = true // 组件载入后再聚焦输入框
          }, 100)
        }
      }
    },
    methods: {
      // 输入同步页面数据
      setInputVal(e) {
        if (e.detail.value.length > 100) {
          this.cnContent = e.detail.value.slice(0, 100)
        } else {
          this.cnContent = e.detail.value
        }
        console.log(this.cnContent)
      },
      // 关闭组件
      onClose() {
        this.focus = false
        this.triggerEvent('handleClosePush')
      },
      // 发送按钮-执行请求
      bindButtonTap() {
        this.focus = false
        this.triggerEvent('handleClosePush', this.cnContent) // 提交回复
      }
    },
  
    created() {}
  })
</script>

<script type="application/json">
  {
    "component": true
  }
</script>

<style lang="scss">
  .apply-component {
    width: 100%;
    .apply-content {
      margin-bottom: 32rpx;
      .text-tip {
        font-size: 20rpx;
        padding: 10rpx 20rpx;
        color: #aaaaaa;
      }
      .keyboard-text {
        display: flex;
        justify-content: space-around;
        .placeholder-text {
          color: #aaaaaa;
        }
        .apply-textarea {
          width: 580rpx;
          border: 1px solid rgb(141, 139, 139);
          border-radius: 10rpx;
          padding: 12rpx;
          background: #f6f6f6;
        }
        .btn-area {
          width: 100rpx;
          border-radius: 10rpx;
          display: flex;
          justify-content: flex-end;
          flex-direction: column;
          .send-btn {
            border-radius: 10rpx;
            padding: 5rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 28rpx;
            text-align: center;
            background: #ffd817;
          }
        }
      }
    }
  }
</style>

组件引入：

<applykeyborder showPopup="{{showPopup}}" bind:handleClosePush="handleClosePush" />

---

有用到van-popup组件，需要按需或全局引入vant组件库

开发过程有个问题，滑动弹出层（非蒙层）能够滚动下方的页面

怎么去阻止popup组件内容事件穿透？