JxlDialog 對話框

在保留當前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作。

基于 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 對話框
 * 在保留當前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作
 */
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 出現(xiàn)時將 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 關(guān)閉 Dialog
     */
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    /**
     * 是否可以通過按下 ESC 關(guān)閉 Dialog
     */
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    /**
     * 是否顯示關(guān)閉按鈕
     */
    showClose: {
      type: Boolean,
      default: true
    },
    /**
     * 關(guān)閉時銷毀 Dialog 中的元素
     */
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    /**
     * 設(shè)置 header 的樣式
     */
    headerStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 設(shè)置 body 的樣式
     */
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 設(shè)置 footer 的樣式
     */
    footerStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 關(guān)閉前的回調(diào)，會暫停 Dialog 的關(guān)閉
     */
    beforeClose: {
      type: Function,
      default: () => {}
    },
    /**
     * 設(shè)置 彈框取消的回調(diào)
     */
    cancel: {
      type: Function,
      default: () => {}
    },
    /**
     * 設(shè)置 彈框確認的回調(diào)
     */
    confirm: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 打開的回調(diào)
     */
    open: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 打開動畫結(jié)束時的回調(diào)
     */
    opened: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 關(guān)閉的回調(diào)
     */
    close: {
      type: Function,
      default: () => {}
    },
    /**
     * Dialog 關(guān)閉動畫結(jié)束時的回調(diào)
     */
    closed: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    /**
     * 取消處理
     */
    cancelHandle() {
      this.$emit('cancel') // 取消回調(diào)
    },
    /**
     * 確定處理
     */
    confirmHandle() {
      this.$emit('confirm') // 確認回調(diào)
    }
  }
}
</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）