<template>
|
<div class="base-modal" :class="{ wider: props.wider }">
|
<el-dialog v-model="modelData" :close-on-click-modal="false" width="753px" :show-close="false">
|
<template #header>
|
<div class="modal-title">
|
<div class="modal-title-text">
|
<slot name="title"></slot>
|
</div>
|
<div class="modal-title-close" @click="closeModal">
|
<el-icon :size="22"><CloseBold /></el-icon>
|
</div>
|
</div>
|
</template>
|
<template #default>
|
<slot name="default"></slot>
|
</template>
|
<template #footer>
|
<slot name="footer"></slot>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import { CloseBold } from '@element-plus/icons-vue'
|
|
export interface BaseModalProps {
|
/** 是否展示模态框 */
|
modelValue: boolean
|
/** 更宽版本 */
|
wider?: boolean
|
}
|
const props = withDefaults(defineProps<BaseModalProps>(), {
|
modelValue: false,
|
wider: false
|
})
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
close: []
|
}>()
|
|
const modelData = useVModel(props, 'modelValue', emit)
|
function closeModal() {
|
emit('close')
|
}
|
</script>
|
<style scoped lang="scss">
|
$status-ready: #10256c;
|
$status-done: #0059ffd0;
|
:deep(.el-dialog) {
|
width: 553px;
|
min-height: 200px;
|
height: auto;
|
background: $status-ready;
|
}
|
|
.wider {
|
:deep(.el-dialog) {
|
width: 938px;
|
height: 733px;
|
background: $status-ready;
|
}
|
}
|
|
.modal-title {
|
position: relative;
|
display: flex;
|
align-items: center;
|
&-text {
|
padding-left: 12px;
|
font-size: 20px;
|
font-weight: 600;
|
}
|
&-close {
|
cursor: pointer;
|
position: absolute;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
top: 0px;
|
right: 0px;
|
}
|
}
|
</style>
|
