teleport per spostare il dialog in una posizione consona nel DOM

Cristiano Magro

2025-01-07 0ff501d4aa28b64a11a3d9a6101e3f997a9e9795

teleport per spostare il dialog in una posizione consona nel DOM

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue

@@ -1,20 +1,22 @@
<template>
  <div @click="$emit('close')"></div>
  <dialog open>
    <header>
      <slot name="header">
        <h2>{{ title }}</h2>
      </slot>
    </header>
    <section>
      <slot></slot>
    </section>
    <menu>
      <slot name="action">
        <base-button @click="$emit('close')"></base-button>
      </slot>
    </menu>
  </dialog>
  <teleport to="body">
    <div @click="$emit('close')"></div>
    <dialog open>
      <header>
        <slot name="header">
          <h2>{{ title }}</h2>
        </slot>
      </header>
      <section>
        <slot></slot>
      </section>
      <menu>
        <slot name="action">
          <base-button @click="$emit('close')"></base-button>
        </slot>
      </menu>
    </dialog>
  </teleport>
</template>

<script>