26 lines
779 B
Vue
26 lines
779 B
Vue
<script setup lang="ts">
|
|
import { X } from "@lucide/vue";
|
|
|
|
defineProps<{
|
|
title: string;
|
|
labelledBy: string;
|
|
}>();
|
|
|
|
defineEmits<{ close: [] }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal-backdrop" role="presentation" @click.self="$emit('close')">
|
|
<section class="app-dialog" role="dialog" aria-modal="true" :aria-labelledby="labelledBy">
|
|
<header class="dialog-header">
|
|
<h2 :id="labelledBy">{{ title }}</h2>
|
|
<button type="button" class="dialog-close" aria-label="关闭" @click="$emit('close')">
|
|
<X :size="20" aria-hidden="true" />
|
|
</button>
|
|
</header>
|
|
<div class="dialog-content"><slot /></div>
|
|
<footer v-if="$slots.footer" class="dialog-footer"><slot name="footer" /></footer>
|
|
</section>
|
|
</div>
|
|
</template>
|