76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<template>
|
|
<div class="base-model-wrapper">
|
|
<el-dialog
|
|
v-if="config.visible"
|
|
v-dialogDrag
|
|
:title="config.title"
|
|
:append-to-body="config.appendToBody"
|
|
:visible.sync="config.visible"
|
|
:close-on-click-modal="false"
|
|
:show-close="config.showClose"
|
|
:top="config.top"
|
|
:width="config.width"
|
|
:fullscreen="config.fullscreen"
|
|
>
|
|
<div class="base-modal-body" :style="config.bodyStyle">
|
|
<slot name="dialog-body" />
|
|
</div>
|
|
<div slot="footer" class="base-modal-footer">
|
|
<slot name="dialog-footer" />
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'BaseDialog',
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
visible: false,
|
|
title: '',
|
|
closeOnClickModal: false,
|
|
showClose: true,
|
|
appendToBody: false,
|
|
width: '100px',
|
|
fullscreen: false,
|
|
top: '15vh',
|
|
bodyStyle: '',
|
|
}
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.base-model-wrapper {
|
|
.el-dialog__header {
|
|
padding: 10px;
|
|
.el-dialog__headerbtn {
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
.el-dialog__body {
|
|
padding: 10px 10px 10px 10px;
|
|
.base-modal-body {
|
|
min-height: 100px;
|
|
max-height: 650px;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
}
|
|
.el-dialog__footer {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.notFooter {
|
|
.is-fullscreen .el-dialog__footer {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|