封装
<template>
<el-dialog
:visible.sync="visible"
:close-on-click-modal="closeOnClickModal"
:destroy-on-close="destroyOnClose"
:width="width"
:title="title"
:top="top"
:before-close="handleClose"
:close-on-press-escape="false"
:append-to-body="appendToBody"
class="custom-dialog"
>
<div slot="title" class="title">
<slot name="title"></slot>
</div>
<slot></slot>
<div slot="footer" class="dialog-footer">
<slot name="footer">
<el-button type="primary" plain @click="handleClose"
>取 消</el-button
>
<el-button type="primary" @click="handleSubmit"
>确 定</el-button
>
</slot>
</div>
</el-dialog>
</template>
<script>
export default {
name: "custom-dialog",
props: {
top: {
type: String,
default: "10vh",
},
width: {
type: String,
default: "30%",
},
visible: {
type: Boolean,
default: false,
},
appendToBody: {
type: Boolean,
default: false,
},
closeOnClickModal: {
type: Boolean,
default: false,
},
destroyOnClose: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "标题",
},
},
methods: {
handleClose() {
this.$emit("close");
},
handleSubmit() {
this.$emit("submit");
},
},
};
</script>
<style lang="scss" scoped>
.custom-dialog {
::v-deep(.el-dialog__body) {
padding: 20px;
}
::v-deep(.el-dialog__header) {
border-bottom: 1px solid #e5e7eb;
}
.title {
font-family: PingFang-Medium;
font-size: 16px;
color: #000;
}
}
</style>
使用
<CustomDialog
:visible="dialogVisible"
top="4vh"
width="40%"
:destroyOnClose="true"
@close="handleCloseDialog"
@submit="handleSubmit"
>
<template v-slot:title>
<span>告警信息</span>
</template>
<template v-slot:default>
<span>告警内容</span>
</template>
<template v-slot:footer>
<el-button type="primary">关闭</el-button>
</template>
