<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 v-if="props.wider" 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">
|
:deep(.el-dialog) {
|
background: transparent !important;
|
background-image: url('/modal-background.png') !important;
|
background-repeat: no-repeat;
|
background-size: 100% 100% !important;
|
width: 753px;
|
height: 728px;
|
}
|
|
.wider {
|
:deep(.el-dialog) {
|
background: transparent !important;
|
background-image: url('/modal-background-wider.png') !important;
|
background-repeat: no-repeat;
|
background-size: 100% 100% !important;
|
width: 938px;
|
height: 733px;
|
}
|
}
|
|
.modal-title {
|
position: relative;
|
display: flex;
|
align-items: center;
|
&-text {
|
padding-left: 12px;
|
font-size: 26px;
|
font-weight: 600;
|
}
|
&-close {
|
cursor: pointer;
|
height: 36px;
|
width: 36px;
|
border-radius: 50%;
|
background-color: #00d7e9;
|
position: absolute;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
top: -16px;
|
right: -30px;
|
}
|
}
|
</style>
|
