Vue implementiert Modal-Komponente basierend auf Teleport

<teleportieren nach="#modal">
Inhalt</teleport>

aufstellen(){
  const node = Dokument.createElement('div')
  node.id = "modal"
  Dokument.Body.AppendChild(Knoten)
  beiUnmountet(() => {
    Dokument.Body.RemoveChild(Knoten)
  })
}

// hooks/useDOMCreate.ts
importiere { onUnmount } von 'vue'

Funktion useDOMCreate(nodeId:string):void {
  const node = Dokument.createElement('div')
  node.id = Knoten-ID
  Dokument.Body.AppendChild(Knoten)
  beiUnmountet(() => {
    Dokument.Body.RemoveChild(Knoten)
  })
}
Standardmäßig exportieren useDOMCreate

importiere useDOMCreate von '../hooks/useDOMCreate'
setup(Eigenschaften, ctx) {
    useDOMCreate('modal')
}

//Modal.vue
<Vorlage>
  <teleportieren nach="#modal">
    <div Klasse="modal d-block" tabindex="-1" v-if="isVisible">
      <div Klasse="modal-dialog">
        <div Klasse="modaler Inhalt">
          <div Klasse="modal-header">
            <h5 class="modal-title">{{title}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
              <span aria-hidden="true" @click="onClose">&times;</span>
            </button>
          </div>
          <div Klasse="modal-body">
            <Steckplatz></Steckplatz>
          </div>
          <div Klasse="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="onClose">Abbrechen</button>
            <button type="button" class="btn btn-primary" @click="onConfirm">Bestätigen</button>
          </div>
        </div>
      </div>
    </div>
  </teleportieren>
</Vorlage>
<script lang="ts">
importiere { defineComponent } von 'vue'
importiere useDOMCreate von '../hooks/useDOMCreate'
exportiere StandarddefiniereKomponente({
  Name: "Modal",
  gibt aus: ['Modell schließen', 'Modell bestätigen'],
  Requisiten: {
    Titel:
      Typ: Zeichenfolge,
      Standard: ''
    },
    istSichtbar: {
      Typ: Boolean,
      Standard: false
    }
  },
  setup(Eigenschaften, ctx) {
    useDOMCreate('modal')
    const onClose = () => {
      ctx.emit('Modell schließen')
    }
    const beiBestätigung = () => {
      ctx.emit('Modell bestätigen')
    }
    zurückkehren {
      beim Schließen,
      beiBestätigen
    }
  }
})
</Skript>

<Vorlage>
  <div Klasse="Beitragsdetailseite">
    <button type="button" class="btn btn-danger" @click="handleDelete">Löschen</button>
    <modal title='Sind Sie sicher, dass Sie löschen möchten? ' :istSichtbar="modalSichtbar" @model-close="handleModalClose" @model-confirm="handleModalConfim">
      <p>Möchten Sie diesen Artikel wirklich löschen? </p>
    </modal>
  </div>
</Vorlage>
<script lang="ts">
importiere { defineComponent, ref } von 'vue'
Modal importieren aus '../components/Modal.vue'

exportiere StandarddefiniereKomponente({
  Name: 'Post-Detail',
  Komponenten: { Modal },
  aufstellen() {
    const modalVisible = ref(false)
    const handleDelete = () => {
      modalVisible.value = true
    }
    const hanldeModalClose = () => {
      modalVisible.value = false
    }
    const handleModalConfim = () => {
      modalVisible.value = false
      ...
     //Anschließende logische Verarbeitung}
    zurückkehren {
      hanldeModalClose,
      handleModalConfim,
      handleDelete,
      modalSichtbar
    }
  }
})
</Skript>