69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<template>
|
|
<dialog class="dialog" ref="dialog" @close="onClose" @keydown.esc="onCancel">
|
|
<div class="dialog-main">
|
|
<slot></slot>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis, fermentum nunc nec, ultricies nunc. Donec
|
|
</div>
|
|
<div class="dialog-aside">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis, fermentum nunc nec, ultricies nunc. Donec
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const dialog = ref<HTMLDialogElement>();
|
|
const popover = ref<HTMLDivElement>();
|
|
const props = defineProps<{
|
|
open: boolean,
|
|
preventClose: boolean,
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:open': [boolean]
|
|
}>();
|
|
|
|
function onCancel(event: Event) {
|
|
if (props.preventClose) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
function onClose() {
|
|
emit('update:open', false);
|
|
}
|
|
|
|
watch(() => props.open, (open) => {
|
|
if (open) {
|
|
console.log(dialog.value);
|
|
dialog.value?.showModal();
|
|
popover.value?.showPopover();
|
|
} else {
|
|
dialog.value?.close();
|
|
}
|
|
}, {immediate: true});
|
|
|
|
</script>
|
|
<style>
|
|
.dialog[open] {
|
|
display: grid;
|
|
max-width: 800px;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 4rem;
|
|
background: none;
|
|
border: none;
|
|
pointer-events: visible;
|
|
}
|
|
|
|
.dialog[open]::backdrop {
|
|
background: rgba(from red r g b / 0.5);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.dialog-main, .dialog-aside {
|
|
padding: 1rem;
|
|
background: white;
|
|
border: 5px solid black;
|
|
outline: none;
|
|
}
|
|
</style> |