mall-web-ssr/components/mobile/base/ModalWrapper.vue

<template>
  <div class="mobile-modal" v-if="showModal" @click="$emit('closeAction')">
    <div class="mobile-modal-box mobile-modal-wrapper" @click="stopPropagation($event)">
      <div class="mobile-modal-header" v-if="!noHeader">{{title}}<i @click="$emit('closeAction')" class="icon-guanbi iconfont"></i></div>
      <div ref="mobileModalBox" class="mobile-scroll-wrap"><div><slot></slot></div></div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showModal: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      noHeader: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showModal: {
        handler: function (val) {
          if (val) {
            this.init()
          } else {
            this.initScroll.destroy()
            this.initScroll = null
          }
        }
      }
    },
    methods: {
      init () {
        this.$nextTick(() => {
          this._initscroll()
        })
      }
    },
    mounted() {
      this.init()
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal .mobile-modal-wrapper {
    top: 1.6rem;
    bottom: 1.6rem;
    left: 5%;
    right: 5%;
  }
  .mobile-scroll-wrap {
    overflow: hidden;
    height: 100%;
    background: #fff;
    border-bottom-left-radius: .07rem;
    border-bottom-right-radius: .07rem;
  }
</style>