<template>
    <el-dialog
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        custom-class="diy-dialog"
        ref="dialog"
        v-bind="$attrs"
        v-on="$listeners"
    >
        <div class="su-diy-dialog__header"
             v-if="$slots.header"
             v-dialogDrag="{dragSelector:'.su-diy-dialog__header', moveSelector:'.el-dialog'}"
        >
            <slot name="header"></slot>
        </div>
        <div class="su-diy-dialog__content">
            <slot/>
        </div>
        <template slot="footer">
            <slot name="footer"></slot>
        </template>
    </el-dialog>
</template>

<script>
import dialogDrag from "../../../service/directives/element-drag";

export default {
    name: "veDialog",
    data() {
        return {
            vm: this
        }
    },
    directives: {
        dialogDrag,
    },
    created() {
    },
    methods: {
        close() {
            this.$refs.dialog.handleClose();
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .diy-dialog {
    .el-dialog__header {
        display: none;
    }
    //.su-diy-dialog__content{
    //    padding: 25px 25px 30px;
    //}
    .el-dialog__body {
        padding: 0;
    }
}
</style>
