chore: 删除冗余的 Modal.vue
项目已有 BaseDialog.vue 组件提供相同功能,此组件属于误提交。
This commit is contained in:
@@ -1,120 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Teleport to="body">
|
|
||||||
<div
|
|
||||||
v-if="show"
|
|
||||||
class="modal-overlay"
|
|
||||||
aria-labelledby="modal-title"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
@click.self="handleClose"
|
|
||||||
>
|
|
||||||
<!-- Modal panel -->
|
|
||||||
<div :class="['modal-content', sizeClasses]" @click.stop>
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 id="modal-title" class="modal-title">
|
|
||||||
{{ title }}
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
@click="emit('close')"
|
|
||||||
class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
|
|
||||||
aria-label="Close modal"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="h-5 w-5"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Body -->
|
|
||||||
<div class="modal-body">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div v-if="$slots.footer" class="modal-footer">
|
|
||||||
<slot name="footer"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, watch, onMounted, onUnmounted } from 'vue'
|
|
||||||
|
|
||||||
type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
show: boolean
|
|
||||||
title: string
|
|
||||||
size?: ModalSize
|
|
||||||
closeOnEscape?: boolean
|
|
||||||
closeOnClickOutside?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'close'): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
size: 'md',
|
|
||||||
closeOnEscape: true,
|
|
||||||
closeOnClickOutside: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
const sizeClasses = computed(() => {
|
|
||||||
const sizes: Record<ModalSize, string> = {
|
|
||||||
sm: 'max-w-sm',
|
|
||||||
md: 'max-w-md',
|
|
||||||
lg: 'max-w-lg',
|
|
||||||
xl: 'max-w-xl',
|
|
||||||
'2xl': 'max-w-5xl',
|
|
||||||
full: 'max-w-4xl'
|
|
||||||
}
|
|
||||||
return sizes[props.size]
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
if (props.closeOnClickOutside) {
|
|
||||||
emit('close')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleEscape = (event: KeyboardEvent) => {
|
|
||||||
if (props.show && props.closeOnEscape && event.key === 'Escape') {
|
|
||||||
emit('close')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent body scroll when modal is open
|
|
||||||
watch(
|
|
||||||
() => props.show,
|
|
||||||
(isOpen) => {
|
|
||||||
console.log('[Modal] show changed to:', isOpen)
|
|
||||||
if (isOpen) {
|
|
||||||
document.body.style.overflow = 'hidden'
|
|
||||||
} else {
|
|
||||||
document.body.style.overflow = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
document.addEventListener('keydown', handleEscape)
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener('keydown', handleEscape)
|
|
||||||
document.body.style.overflow = ''
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user