JxlDialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基于 Element UI 的 el-dialog 组件封装。

<template>
  <el-dialog
    :visible="visible"
    :width="width"
    :top="top"
    :center="center"
    :modal="modal"
    :fullscreen="fullscreen"
    :lock-scroll="lockScroll"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :destroy-on-close="destroyOnClose"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-if="$scopedSlots['title'] || title" v-slot:title>
      <div class="jxl-dialog__header" :style="headerStyle" :class="headerCustomClass">
        <slot name="title">{{ title }}</slot>
      </div>
    </template>
    <div class="jxl-dialog__body" :style="bodyStyle" :class="bodyCustomClass">
      <slot />
    </div>
    <template v-if="$scopedSlots['footer'] || footer" v-slot:footer>
      <div class="jxl-dialog__footer" :style="footerStyle" :class="footerCustomClass">
        <slot name="footer">
          <el-button v-if="showCancel" @click="cancelHandle">{{ cancelText }}</el-button>
          <el-button type="primary" @click="confirmHandle">{{ confirmText }}</el-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<script>
/**
 * JxlDialog 对话框
 * 在保留当前页面状态的情况下，告知用户并承载相关操作
 */
export default {
  name: 'JxlDialog',
  model: {
    prop: 'visible'
  },
  props: {
    /**
     * 是否显示 Dialog
     * 支持 .sync 修饰符
     * 可用 v-model 绑定值
     */
    visible: {
      type: Boolean,
      default: false
    },
    /**
     * Dialog 的标题
     * 也可通过具名 slot（见下表）传入
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 是否显示 Dialog 的底部
     * 可通过具名 slot（见下表）传入
     */
    footer: {
      type: [String, Boolean],
      default: true
    },
    /**
     * 显示取消的文本
     */
    showCancel: {
      type: Boolean,
      default: true
    },
    /**
     * 取消的文本
     */
    cancelText: {
      type: String,
      default: '取消'
    },
    /**
     * 确定的文本
     */
    confirmText: {
      type: String,
      default: '确定'
    },
    /**
     * Dialog 的宽度
     */
    width: {
      type: String,
      default: '50%'
    },
    /**
     * 是否为全屏 Dialog
     */
    fullscreen: {
      type: Boolean,
      default: false
    },
    /**
     * Dialog CSS 中的 margin-top 值
     */
    top: {
      type: String,
      default: '15vh'
    },
    /**
     * 是否对头部和底部采用居中布局
     */
    center: {
      type: Boolean,
      default: false
    },
    /**
     * 是否需要遮罩层
     */
    modal: {
      type: Boolean,
      default: true
    },
    /**
     * 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
     */
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    /**
     * Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
     */
    appendToBody: {
      type: Boolean,
      default: true
    },
    /**
     * 是否在 Dialog 出现时将 body 滚动锁定
     */
    lockScroll: {
      type: Boolean,
      default: true
    },
    /**
     * Dialog 的自定义类名
     */
    customClass: {
      type: String,
      default: ''
    },
    /**
     * Dialog Header 的自定义类名
     */
    headerCustomClass: {
      type: String,
      default: ''
    },
    /**
     * Dialog Body 的自定义类名
     */
    bodyCustomClass: {
      type: String,
      default: ''
    },
    /**
     * Dialog Footer 的自定义类名
     */
    footerCustomClass: {
      type: String,
      default: ''
    },
    /**
     * 是否可以通过点击 modal 关闭 Dialog
     */
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    /**
     * 是否可以通过按下 ESC 关闭 Dialog
     */
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示关闭按钮
     */
    showClose: {
      type: Boolean,
      default: true
    },
    /**
     * 关闭时销毁 Dialog 中的元素
     */
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    /**
     * 设置 header 的样式
     */
    headerStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 设置 body 的样式
     */
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 设置 footer 的样式
     */
    footerStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 关闭前的回调，会暂停 Dialog 的关闭
     */
    beforeClose: {
      type: Function,
      default: () => {}
    },
    /**
     * 设置 弹框取消的回调
     */
    cancel: {
      type: Function,
      default: () => {}
    },
    /**
     * 设置 弹框确认的回调
     */
    confirm: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 打开的回调
     */
    open: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 打开动画结束时的回调
     */
    opened: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 关闭的回调
     */
    close: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 关闭动画结束时的回调
     */
    closed: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    /**
     * 取消处理
     */
    cancelHandle() {
      this.$emit('cancel') // 取消回调
    },
    /**
     * 确定处理
     */
    confirmHandle() {
      this.$emit('confirm') // 确认回调
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  overflow: hidden;

  .el-dialog__header {
    padding: 0;
    color: #000000d9;
    background: transparent;
    border-bottom: none;
    border-radius: 0;

    .jxl-dialog__header {
      padding: 16px 24px;
      color: #000000d9;
      background: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, .06);
      border-radius: 2px 2px 0 0;
    }
  }
  .el-dialog__body {
    padding: 0;
    background: transparent;
    box-shadow: none;

    .jxl-dialog__body {
      background-color: #fff;
      padding: 24px;
    }
  }
  .el-dialog__footer {
    padding: 0;
    background: transparent;
    border: none;

    .jxl-dialog__footer {
      text-align: right;
      padding: 10px 16px;
      background: #fff;
      border-top: 1px solid rgba(0, 0, 0, .06);
      border-radius: 0 0 2px 2px;

      .el-button {
        height: 32px;
        border-radius: 2px;
      }
      .el-button + .el-button {
        margin-left: 12px;
      }
    }
  }
  &.el-dialog--center {
    .el-dialog__header {
      .jxl-dialog__header {
        text-align: center;
      }
    }
    .el-dialog__footer {
      .jxl-dialog__footer {
        text-align: center;
      }
    }
  }
}
</style>

Dialog 属性（Attributes）

Dialog 插槽（Slots）

Dialog 事件（Events）