97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<!-- modal -->
|
||
<div v-if="modelValue" class="modal fade show d-block" role="dialog">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
|
||
<!-- HEADER -->
|
||
<div v-if="showHeader" class="modal-header">
|
||
<h4 class="modal-title">{{ modalTitle }}</h4>
|
||
<h4 class="cursor-pointer" @click="$emit('update:modelValue', false)">×</h4>
|
||
</div>
|
||
|
||
<!-- BODY -->
|
||
<div class="modal-body">
|
||
<slot />
|
||
<!-- If string, render as text; if component/VNode, render directly -->
|
||
<template v-if="isString">
|
||
<div v-html="body"></div>
|
||
</template>
|
||
<template v-else-if="body">
|
||
<component :is="body" />
|
||
</template>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<div class="modal-footer w-100">
|
||
<slot name="footer" />
|
||
<button v-if="footerClose && !$slots.footer" class="btn btn-primary w-100 py-2 rounded-3 shadow-sm fw-bold" @click="$emit('update:modelValue', false)">
|
||
OK
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- backdrop -->
|
||
<div v-if="modelValue" class="modal-backdrop fade show"></div>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
modelValue: Boolean,
|
||
modalTitle: [String, Boolean],
|
||
body: [String, Object], // support string or VNode/component
|
||
footerClose: { type: Boolean, default: true }
|
||
})
|
||
|
||
const showHeader = computed(() => props.modalTitle !== false)
|
||
const isString = computed(() => typeof props.body === 'string')
|
||
</script>
|
||
|
||
<style scoped>
|
||
.modal {
|
||
z-index: 30001;
|
||
}
|
||
|
||
.modal-content {
|
||
max-height: 85vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-body {
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
z-index: 30000;
|
||
}
|
||
|
||
.modal-dialog {
|
||
z-index: 30002;
|
||
margin-top: 5vh;
|
||
}
|
||
|
||
.modal-title {
|
||
margin: 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.modal-header h4:last-child {
|
||
font-size: 24px;
|
||
line-height: 1;
|
||
color: #999;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.modal-header h4:last-child:hover {
|
||
color: #333;
|
||
}
|
||
</style> |