SOURCE

<template>
  <el-dialog
    top="0"
    :width="width"
    :custom-class="getCustomClass"
    :title="title"
    :visible.sync="value"
    append-to-body
    :before-close="close"
  >
    <slot></slot>
    <div
      v-if="showCancelButton || showConfirmButton"
      slot="footer"
      class="dialog-footer__btns"
    >
      <slot name="footer">
        <el-button
          v-if="showCancelButton"
          plain
          @click="handleCancel"
        >
          {{ cancelButtonText }}
        </el-button>
        <el-button
          v-if="showConfirmButton"
          type="primary"
          :loading="confirmLoading"
          @click="handleConfirm"
        >
          {{ confirmButtonText }}
        </el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>

/*
  **************************************************
  version: '0.10'
  author": "46898"
  description": 弹窗组件
  **************************************************
 */
export default {
  name: 'PromptDialog',
  components: {
  },
  inheritAttrs: false,
  model: {
    prop: 'val',
    event: 'update'
  },
  props: {
    val: {
      type: Boolean,
      required: true
    },
    // 宽度
    width: {
      type: String,
      default: '900px'
    },
    // 自定义样式类名
    customClass: {
      type: String,
      default: ''
    },
    // 标题
    title: {
      type: String,
      required: true,
      default: ''
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    //  是否显示确定按钮
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    //  是否显示取消按钮
    showCancelButton: {
      type: Boolean,
      default: true
    },
    //  取消按钮文本
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    //  确定按钮文本
    confirmButtonText: {
      type: String,
      default: '确定'
    }
  },
  data () {
    return {
      // 点击确定loading状态
      confirmLoading: false
    }
  },
  computed: {
    // 弹窗样式类名
    getCustomClass () {
      const { customClass } = this


      return `prompt-dialog ${customClass}`
    },
    //  弹窗显示状态
    value: {
      get () {
        return this.val
      },
      set (val) {
        this.$emit('update', val)
      }
    }
  },
  methods: {
    // 处理完成
    done () {
      this.confirmLoading = false
    },
    // 关闭事件
    close (done = () => { }) {
      done()
      this.value = false
      this.$emit('update', false)
      this.$emit('cancel')
    },
    // 取消事件
    handleCancel () {
      this.done()
      this.close()
    },
    // 确定事件
    handleConfirm () {
      this.confirmLoading = true
      this.$emit('confirm', { done: () => this.done(), close: () => this.close() })
    }
  }
}
</script>

<style lang="less">
.prompt-dialog {
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  border: none;
  border-radius: 4px;
  .el-dialog__header {
    padding: 0 18px;
    .el-dialog__title {
      display: inline-block;
      line-height: 50px;
      font-size: 18px;
      font-weight: 400;
      text-indent: 19px;
      color: #333333;
      position: relative;
      &::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 2px;
        height: 18px;
        background: #2367f1;
        border-radius: 1px;
      }
    }
    .el-dialog__headerbtn {
      background: url("~@/assets/images/confirm-close.png") center center
        no-repeat;
      width: 18px;
      height: 18px;
      .el-icon-close::before {
        display: none;
      }
    }
  }
  .el-dialog__body {
    margin: 0 15px;
    padding: 20px 15px;
    border-top: 1px solid #eff1f5;
    min-height: 201px;
  }
  .el-dialog__footer {
    padding: 0;
    border-top: 1px solid #eff1f5;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button {
      height: 32px;
      line-height: 32px;
      padding: 0;
      width: 100px;
      border-radius: 2px;
      font-size: 14px;
      &.el-button--default {
        border-color: #dddddd;
        color: #707070;
        &:hover,
        &.active {
          border-color: #2856d4;
          color: #2856d4;
        }
      }
      &.el-button--primary {
        border-color: #2367f1;
        background: #2367f1;
        color: #ffffff;
        &:hover,
        &.active {
          border-color: #6699ff;
          background: #6699ff;
          color: #ffffff;
        }
      }
    }
    .el-button + .el-button {
      margin-left: 16px;
    }
  }
}
</style>