1234567891011121314151617181920212223242526272829303132333435363738 |
- <template>
- <dialog ref="dialog" class="v-dialog" v-bind="attrs" >
- <slot />
- </dialog>
- </template>
-
- <script setup lang="ts">
- import {
- onMounted, ref, watchEffect, useAttrs,
- } from 'vue';
- const dialog = ref<InstanceType<any> | undefined>(null);
- const internalOpen = ref(false);
- const props = defineProps({
- open: Boolean,
- });
- const attrs = useAttrs();
- function showHideDialog() {
- if (!dialog?.value) return;
- if (props.open) dialog.value.showModal();
- else dialog.value.close();
- }
- onMounted(() => {
- watchEffect(() => {
- if (props.open !== internalOpen.value) {
- showHideDialog();
- internalOpen.value = props.open;
- }
- });
- });
- </script>
- <style></style>
-
|