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>
      <slot name="header"></slot>
      <div ref="mobileModalBox" class="mobile-scroll-wrap" :style="[ComputedStyle]" >
        <div>
          <slot></slot>
        </div>
      </div>
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showModal: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      noHeader: {
        type: Boolean,
        default: false
      },
      bgColor: {
        type: String,
        default: '#fff'
      },
      hasFooter: {
        type: Boolean,
        default: false
      },
      hasHeader: {
        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()
        })
      }
    },
    computed: {
      ComputedStyle() {
        if (this.hasFooter) {
          return {
            height: '68%',
            background: this.bgColor,
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0
          }
        } else {
          return {
            height: '100%',
            background: this.bgColor
          }
        }
      }
    },
    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>