VueはTeleportをベースにModalコンポーネントを実装します

<テレポート先="#modal">
コンテンツ</teleport>

設定（）{
  定数ノード = document.createElement('div')
  node.id = 'モーダル'
  document.body.appendChild(ノード)
  マウント解除時(() => {
    document.body.removeChild(ノード)
  })
}

// フック/useDOMCreate.ts
'vue' から { onUnmounted } をインポートします

関数 useDOMCreate(nodeId:string):void {
  定数ノード = document.createElement('div')
  ノードID = ノードID
  document.body.appendChild(ノード)
  マウント解除時(() => {
    document.body.removeChild(ノード)
  })
}
エクスポートデフォルトuseDOMCreate

'../hooks/useDOMCreate' から useDOMCreate をインポートします。
セットアップ(props, ctx) {
    useDOMCreate('モーダル')
}

//モーダル.vue
<テンプレート>
  <テレポート先="#modal">
    <div class="modal d-block" tabindex="-1" v-if="isVisible">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{title}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
              <span aria-hidden="true" @click="onClose">&times;</span>
            </ボタン>
          </div>
          <div class="modal-body">
            <スロット></スロット>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="onClose">キャンセル</button>
            <button type="button" class="btn btn-primary" @click="onConfirm">確認</button>
          </div>
        </div>
      </div>
    </div>
  </テレポート>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent} をインポートします。
'../hooks/useDOMCreate' から useDOMCreate をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'モーダル'、
  出力: ['model-close', 'model-confirm'],
  小道具: {
    タイトル：
      タイプ: 文字列、
      デフォルト： ''
    },
    表示可能: {
      タイプ: ブール値、
      デフォルト: false
    }
  },
  セットアップ(props, ctx) {
    useDOMCreate('モーダル')
    定数 onClose = () => {
      ctx.emit('モデルを閉じる')
    }
    定数onConfirm = () => {
      ctx.emit('モデル確認')
    }
    戻る {
      閉じる時、
      確認時
    }
  }
})
</スクリプト>

<テンプレート>
  <div class="post-detail-page">
    <button type="button" class="btn btn-danger" @click="handleDelete">削除</button>
    <modal title='削除してもよろしいですか? ' :isVisible="modalVisible" @model-close="handleModalClose" @model-confirm="handleModalConfim">
      <p>この記事を削除してもよろしいですか? </p>
    </モーダル>
  </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent, ref} をインポートします。
'../components/Modal.vue' から Modal をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'post-detail'、
  コンポーネント: { モーダル },
  設定（） {
    定数 modalVisible = ref(false)
    const ハンドル削除 = () => {
      modalVisible.value = true
    }
    const hanldeModalClose = () => {
      modalVisible.value = false
    }
    const ハンドルモーダル確認 = () => {
      modalVisible.value = false
      ...
     //後続の論理処理}
    戻る {
      hanldeModalClose、
      ハンドルモーダル確認、
      ハンドル削除、
      モーダル表示可能
    }
  }
})
</スクリプト>