自定义 element 弹窗组件

<el-dialog
            class="dialog-container"
            :show-close="false"
            :visible.sync="dialogVisible"
            width="40%"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            append-to-body
        >
            <div class="dialog-title" slot="title">
                <div class="title-name">关闭</div>
                <i class="ez-icon-close" @click="cancel()"></i>
            </div>
            <el-row>
            <el-form
                class="input-event basic_form form"
                :inline="true"
                :model="gbData"
                :rules="gbrules"
                ref="formData"
                @submit.native.prevent>
                <el-form-item slot="" label="请输入关闭理由" prop="bgly">
                    <el-input
                        class="input_width"
                        v-model="gbData.gbly"
                        placehodler="请输入"
                        clearable>
                    </el-input>
                </el-form-item> 
            </el-form>
           
            </el-row>
             <span slot="footer" class="dialog-footer">
                <ez-button @click="cancel" type="primary">关闭</ez-button>
            </span>
        </ez-dialog>

自定义 表头 和 按钮 样式

css样式

.dialog-container {
    .dialog-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 30px;
        // background: linear-gradient(318deg, #2CCCC3 0%, #00c5cd 100%);
        .ez-icon-close {
            cursor: pointer;
            font-size: 26px;
            color: #e2e7fb;
        }
        .title-name {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
            color: #fff;
            // &::before {
            //     width: 26px;
            //     height: 26px;
            //     content: "";
            //     background: url("../../assets/image/home/warn-icon.png")
            //         no-repeat;
            //     background-size: 100% 100%;
            //     margin-right: 10px;
            // }
        }

    }
    .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

嵌套即可