realtorEasier-webSite/pc/src/components/shared/MessageBox/MessageBox.vue

<template>
  <HModal
    :visible="visible"
    :show-close="showClose"
    :mask="mask"
    :close-on-click-mask="closeOnClickMask"
    :close-on-press-escape="closeOnPressEscape"
    @hide="handleAction('close')"
  > 
    <template>
      
      <div class="h-message-box" v-if="type !== 'alert'">
        <header v-if="title" class="h-message-box__header">
          <HIcon v-if="icon" :type="icon" />
          {{ title }}
        </header>
        <main class="h-message-box__body">
          <div class="h-message-box__message">{{ message }}</div>
        </main>
        <footer class="h-message-box__footer">
          <div plain :class="cancelButtonClass" v-if="!hideCancleButton" @click="handleAction('cancel')">{{ cancelButtonText }}</div>
          <div ref="confirm" :class="confirmButtonClass" @click="handleAction('confirm')">{{ confirmButtonText }}</div>
        </footer>
      </div>
      <div class="h-alert-box" v-else>
        <div class="warn-icon">
          <h-icon :type="icon" style="font-size: 40px;line-height: 52px" />
        </div>
        <p class="message">{{ message }}</p>
        <div class="submit-btn" @click="handleAction('close')">确定</div>
      </div>
    </template>
    
    
  </HModal>
</template>

<script>
export default {
  name: 'HMessageBox',
  data () {
    return {
      visible: false,
      title: undefined,
      icon: undefined,
      message: '',
      action: '',
      showConfirmButton: true,
      showCancelButton: false,
      confirmButtonText: '',
      cancelButtonText: '',
      confirmButtonClass: '',
      cancelButtonClass: '',
      showClose: true,
      mask: true,
      closeOnClickMask: true,
      closeOnPressEscape: true,
      hideCancleButton: false,
      type: ''
    }
  },

  watch: {
    visible (val) {
      if (val) {
        this.uid++
      }
    }
  },

  methods: {
    getSafeClose() {
      const currentId = this.uid
      return () => {
        this.$nextTick(() => {
          if (currentId === this.uid) this.doClose()
        })
      }
    },
    doClose() {
      if (!this.visible) return
      this.visible = false
      this._closing = true

      this.onClose && this.onClose()
      setTimeout(() => {
        if (this.action) this.callback(this.action, this)
      })
    },
    handleAction (action) {
      this.action = action
      if (typeof this.beforeClose === 'function') {
        this.close = this.getSafeClose()
        this.beforeClose(action, this, this.close)
      } else {
        this.doClose()
      }
    }
  }
}
</script>

<style lang="less">
.h-message-box {
  width: 420px;
  padding: 10px 15px;
}
.h-message-box__header {
  padding: 5px 0;
  font-size: 18px;
}
.h-message-box__body {
  padding: 10px 0;
  color: #202020;
  line-height: 1.5;
}
.h-message-box__footer {
  padding-top: 10px;
  text-align: right;
  .h-button {
    font-size: 12px;
  }
  .h-button + .h-button {
    margin-left: 10px;
  }
}

.h-alert-box {
  width: 335px;
  height: 256px;
  padding: 48px 50px 30px;
  .warn-icon {
    width: 52px;
    height: 52px;
    border: 1px solid #ebebeb;
    border-radius: 50%;
    text-align: center;
    line-height: 52px;
    color: #1FE4DC;
    margin: 0 auto 10px;
    font-weight: bold;
    font-size: 40px;
  }
  .message {
    color: #909090;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    width: 194px;
    text-align: center;
    margin: 0 auto;
  }
  .submit-btn {
    width: 100%;
    background: #1FE4DC;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    margin-top: 30px;
    cursor: pointer;
  }
}
</style>