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

<template>
  <div class="mobile-modal" v-if="showModal" @click="$emit('closeAction', false)">
    <div class="mobile-modal-box bottom-modal-wrapper" @click="stopPropagation($event)">
      <div class="bottom-modal-header">{{title}}<i @click="$emit('closeAction', false)" class="icon-guanbi1 iconfont"></i></div>
      <slot></slot>
      <div class="bottom-modal-footer" @click="$emit('closeAction', true)">{{submitText}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showModal: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      submitText: {
        type: String,
        default: '确定'
      }
    }
//    watch: {
//      showModal: {
//        handler: function (val) {
//          if (val) {
//            this.init()
//          }
//        }
//      }
//    },
//    methods: {
//      init () {
//        this.$nextTick(() => {
//          this._initscroll()
//        })
//      }
//    },
//    mounted() {
//      this.init()
//    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal {
    .bottom-modal-wrapper {
      bottom: 0;
      top: initial;
      left: 0;
      right: 0;
      text-align: center;
      .bottom-modal-header {
        height: 1rem;
        line-height: 1rem;
        font-weight: bold;
        font-size: .42rem;
        background: #fff;
        position: relative;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;
        i {
          font-size: .32rem;
          position: absolute;
          right: .2rem;
          top: 0;
          color: #bfbfbf;
        }
      }
      .bottom-modal-footer {
        height: 1rem;
        line-height: 1rem;
        background: #3f84f6;
        font-size: .36rem;
        color: #fff;
      }
    }
  }
</style>