Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

// body タグにレンダリングします <teleport to="body">
  <div class="modal">
    私はテレポートしたモーダルです！ 
  </div>
</テレポート>

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<テンプレート>
  <テレポート先="body">
    <トランジション名="ダイアログフェード">
      <div class="dialog-wrapper" v-show="visible">
        <div class="ダイアログ">
          <div class="ダイアログヘッダー">
            <スロット名="タイトル">
              <span class="ダイアログタイトル">
                {{ タイトル }}
              </span>
            </スロット>
          </div>
          <div class="ダイアログボディ">
            <スロット></スロット>
          </div>
          <div class="ダイアログフッター">
            <スロット名="フッター">
              <button @click="onClose">閉じる</button>
            </スロット>
          </div>
        </div>
      </div>
    </トランジション>
  </テレポート>
</テンプレート>

<スクリプト>
'vue' から defineComponent をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'tdialog'
});
</スクリプト>

<スクリプトの設定>
const props = defineProps({
  タイトル: 文字列、
  表示: ブール値
});

const 出力 = defineEmits(['close']);

定数 onClose = () => {
  出力('閉じる');
};
</スクリプト>

<t-dialog title="LGD は無敵です" :visible="visible" @close="onClose"> これはコンテンツの一部です、Xiaose Xianbei。 </t-ダイアログ>

// ...
const 可視 = ref(false);

定数onDialog = () => {
  表示される値 = !表示される値;
};

定数 onClose = () => {
  表示値 = false;
};

// プロンプトを呼び出します Message({ message: 'This is a Message' });

const メッセージ = オプション => {
  // コンテナをレンダリングする準備をする const container = document.createElement('div');
  // vnode を生成する
  const vnode = createVNode(メッセージコンストラクタ、オプション);
  // レンダリングレンダー(vnode, コンテナ);
};

<テンプレート>
  <テレポート先="#app">
    <transition name="メッセージフェード">
      <div v-show="visible" ref="ins" class="message" :style="customStyle">{{ メッセージ }}</div>
    </トランジション>
  </テレポート>
</テンプレート>