1. <template>
    2.   <el-dialog
    3.         :custom-class="customClass"
    4.     :title="dialogVue.title + dialogVue.titleInfo"
    5.     :visible.sync="dialogVue.visible"
    6.     :width="sizeConfig.w"
    7.         :height="sizeConfig.h"
    8.         :modal-append-to-body="false"
    9.         :append-to-body="dialogVue.appendToBody"
    10.         :close-on-click-modal="false"
    11.         :dragDialog="true"
    12.         footer-border
    13.         :fullscreen="dialogVue.isFullScreen"
    14.         @opened="dialogVue.beforeOpenedDialog()"
    15.         @close="dialogVue.cancelDialogShow()"
    16.         @closed="dialogVue.closed()"
    17.     :before-close="dialogVue.beforeClose()">
    18.     <scroll :parent="dialogVue">
    19.       <div v-if="$slots.comment" class="dialog__comment">
    20.         <el-alert type="info" :closable="false" show-icon>
    21.             <template slot="title">
    22.             <slot name="comment"></slot>
    23.           </template>
    24.         </el-alert>
    25.           </div>
    26.             <el-form :model="dialogVue.modalData" :label-width="dialogVue.labelWidth" ref="modalDataForm" class="el-form">
    27.         <slot></slot>
    28.       </el-form>
    29.               <slot name="custom"></slot>
    30.     <scroll>
    32.         <template v-if="dialogVue.hasFooterSlot">
    33.       <div slot="footer">
    34.           <slot name="footer">
    35.           <el-button type="primary" @click="dialogVue.handleConfirmSet()">确定</el-button>
    36.           <el-button type="info" @click="dialogVue.cancelDialogShow()">取消</el-button>
    37.         </slot>
    38.       </div>
    39.     </template>
    40.     </el-dialog>
    41. </template>
    43. <script>
    44. const SIZE_ENUM = {
    45.   small: {
    46.     w: '560px',
    47.     h: '380px'
    48.   },
    49.   medium: {
    50.       w: '560px',
    51.     h: '560px'
    52.   },
    53.   medium: {
    54.       w: '560px',
    55.     h: '680px'
    56.   },
    57.   custom: {
    58.       w: '560px',
    59.     h: '680px'
    60.   }
    61. }       
    62. const scroll = {
    63.     render(h) {
    64.       if (this.parent.hasScrollbar) {
    65.         return h('el-scrollbar', {
    66.           props: {
    67.             scrollbarClass: 'scrollbar--specific'
    68.         }
    69.       }, this.$slots.default);
    70.     } else {
    71.         return h('div', {
    72.           props: {
    73.             class: 'el-dialog__body--noscroll'
    74.         }
    75.       }, this.$slots.default);
    76.     }
    77.   },
    78.   props: {
    79.       parent: {
    80.         type: Object
    81.     }
    82.   }
    83. }
    85. export default {
    86.     components: {
    87.       scroll
    88.   },
    89.   props: {
    90.     // 指定父组件的this
    91.       parent: {
    92.         type: Object
    93.     }
    94.   },
    95.   data() {
    96.       return {
    97.         dialogVue: this.parent || this.$parent,
    98.       sizeConfig: {}
    99.     }
    100.   },
    101.   computed: {
    102.       customClass() {
    103.         let custom = this.dialogVue['custom-class'];
    104.       if (!this.dialogVue.hasFooterSlot) {
    105.              custom += ' no-footer-slot'
    106.       }
    107.       if (!this.dialogVue.hasTablePadding) {
    108.              custom += ' has-table-padding'
    109.       }
    110.       return custom;
    111.     }
    112.   },
    113.   created() {
    114.       this.sizeConfig = this.diaglog.size == 'custom' ? this.dialogVue.sizeCustom : SIZE_ENUM[this.dialogVue.size];
    115.   },
    116.   methods: {
    117.       // 验证
    118.     validate(callback) {
    119.         this.$refs.modalDataForm &&
    120.         this.$refs.modalDataForm.validate((valid) => {
    121.               callback(valid);
    122.           });
    123.     },
    124.     // 重置
    125.     resetFields() {
    126.         this.$refs.modalDataForm && this.$refs.modalDataForm.resetFields();
    127.     },
    128.     clearValidate(props) {
    129.         this.$refs.modalDataForm && this.$refs.modalDataForm.clearValidate(props);
    130.     }
    131.   }
    132. }
    133. </script>