vue3 テレポートの詳細な使用例

公式ウェブサイト

https://cli.vuejs.org/ja/ガイド/

場合によっては、コンポーネントのテンプレートの一部が論理的にはそのコンポーネントに属していることもありますが、技術的な観点からは、テンプレートのその部分を Vue アプリ外の DOM 内の別の場所に移動する方が適切です。

場合

ここに画像の説明を挿入

両方のコンポーネントは親要素にあり、親コンポーネントの子ですが、技術的な観点からは、ボディの下にマウントする必要があります。

修正なしバージョン

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="utf-8">
  <title>Vue3</title>
  <script src="./vue.js"></script>
</head>
<本文>
<div id="hello-vue" クラス="box">
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <button @click="handleClick">クリックするとサブコンポーネントが表示されます</button>
  <cpn ref="compRef" @show-confirm="showConfirm"></cpn>
  <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="終了してもよろしいですか?"></confirm>
</div>
<!--ボタンをクリックした後に表示されるコンポーネント-->
<テンプレートid="mycpn">
  <トランジション名="リストフェード">
    <div class="cpnContainer" v-show="isshow" @click.stop="handleClose()">
      <div class="inner-wrapper" @click.stop>
        トランジションの使用
        <div class="text">
          <div>私はインナーテキストです</div>
          <div>私はインナーテキストです</div>
          <div>私はインナーテキストです</div>
          <div>私はインナーテキストです</div>
          <div>私はインナーテキストです</div>
        </div>
        <div class="close" @click="handleClose()">閉じる</div>
      </div>
    </div>
  </トランジション>

</テンプレート>

<!--確認コンポーネントを閉じるには確認します-->
<テンプレートid="確認">
  <transition name="確認フェード">
    <div v-show="isshow" class="confirm">
      <div class="confirm-wrapper">
        <div class="コンテンツを確認">
          <p>{{テキスト}}</p>
          <div class="btnContainer">
            <button style="background-color: darkseagreen;margin-right: 40px" @click="confirm">{{confirmBtnText}}</button>
            <button @click="cancel">{{cancelBtnText}}</button>
          </div>
        </div>
      </div>
    </div>
  </トランジション>
</テンプレート>
<スクリプト>
  定数cpn = {
    テンプレート: "#mycpn",
    プロパティ: {},
    データ（） {
      戻る {
        // bbb: 145612
        isshow:false
      }
    },
    メソッド: {
      見せる（） {
        this.isshow = true
      },
      隠れる（） {
        // console.log("非表示")
        this.isshow = false
      },
      ハンドルクローズ() {
        // console.log("非表示")
        this.$emit("表示確認")
      },

    }
  }

  定数確認 = {
    テンプレート: "#confirm",
    小道具: {
      文章： {
        タイプ: 文字列、
        デフォルト: 'fdsafdasfdas'
      },
      確認ボタンテキスト: {
        タイプ: 文字列、
        デフォルト: 'OK'
      },
      キャンセルボタンテキスト: {
        タイプ: 文字列、
        デフォルト: 'キャンセル'
      }
    },
    データ（） {
      戻る {
        // bbb: 145612
        isshow: false
      }
    },
    メソッド: {
      見せる（） {
        this.isshow = true
      },
      隠れる（） {
        this.isshow = false
        //サブコンポーネントの表示を制御する},
      // ボタンをクリックした後、親コンポーネントにイベント confirm() をディスパッチします {
        これを非表示にします。
        this.$emit("確認")
      },
      キャンセル（） {
        これを非表示にする()
        this.$emit('キャンセル')
      }
    }
  }
  定数 HelloVueApp = Vue.createApp({
    データ（） {
      戻る {
        メッセージ: 'Hello Vue!!'
      }
    },
    コンポーネント:
      cpn、
      確認する
    },
    メソッド: {
      ハンドルクリック() {
        // 親コンポーネントは子コンポーネントのメソッドを呼び出します // this.$refs.compRef.show()
        this.$refs.compRef.show()
      },
      確認を表示（）{
        コンソールログ("fdsa")
        this.$refs.confirmRef.show()
      },
      // キャンセルまたは確認をクリックして次のロジックを実行します handleConfirm() {
        this.$refs.compRef.hide()
      },
      ハンドルキャンセル() {

      }
    }
  }).mount("#hello-vue")

</スクリプト>
</本文>
<スタイル>
    * {
        フォントサイズ: 50px;
    }

    /*vue 組み込みトランジション*/
    .list-fade-enter-active、.list-fade-leave-active {
        遷移: 不透明度 .3 秒;
    }

    .list-fade-enter-active .inner-wrapper、.list-fade-leave-active .inner-wrapper {
        遷移: すべて .3;
    }

    .list-fade-enter-from、.list-fade-leave-to {
        不透明度: 0;
    }

    .list-fade-enter-from .inner-wrapper、.list-fade-leave-to .inner-wrapper {
        変換: translate3d(0, 100%, 0);
    }


    /*サブコンポーネントスタイル*/
    .cpnコンテナ{
        位置: 固定;
        上: 0;
        下部: 0;
        左: 0;
        右: 0;
        背景: rgba(0, 0, 0, .3);
    }

    .インナーラッパー{
        パディング: 70px;
        背景色: ダークシアン;
        位置: 固定;
        下部: 0;
        幅: 100%;
        ボックスのサイズ: 境界線ボックス;
    }

    。近い {
        位置: 絶対;
        上: 50px;
        右: 50px;
    }

    /*コンポーネントのスタイルを確認*/
    。確認する {
        位置: 固定;
        上: 0;
        下部: 0;
        左: 0;
        右: 0;
        背景色: rgba(0, 0, 0, 0.14);
    }

    .btnコンテナ{
        パディング: 0 70px;
    }
    .確認ラッパー{
        位置: 絶対;
        上位: 50%;
        左: 50%;
        変換: translate(-50%, -50%);
        zインデックス: 999;
        ボックスの影: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);
    }
    .内容確認{
        オーバーフロー: 非表示;
        幅: 600ピクセル;
        境界線の半径: 13px;
        背景: 白
    }
    .confirm-content p {
        表示: ブロック;
        左パディング: 40px;
    }

    /*.内容確認{*/
    /* 境界線の半径: 8px;*/
    /* ボックスシャドウ: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);*/
    /* 位置: 絶対;*/
    /* 上: 50%;*/
    /* 残り: 50%;*/
    /* 変換: translate(-50%, -50%);*/
    /* !*p タグの上部の余白は親要素 bfc に影響します*!*/
    /* !*オーバーフロー: 非表示;*!*/
    /* 背景色: 白;*/
    /*}*/

    .confirm-content ボタン {
        境界線: 1px 実線 コーンフラワーブルー;
        背景色: 透明;
        パディング: 25px 50px;
        下部マージン: 30px;
        境界線の半径: 5px;
    }
    .confirm-fade-enter-active、.confirm-fade-leave-active {
        遷移: すべて .3;
    }
    .confirm-fade-enter-from 、.confirm-fade-leave-to{
        不透明度: 0;
    }
    .confirm-fade-enter-active .confirm-content {
        アニメーション: ズームイン確認 .3s;
        変換の原点: 中心;
    }
    .confirm-fade-leave-active .confirm-content {
        アニメーション: ズームアウトの確認 .3 秒;
        変換の原点: 中心;
    }

    @keyframes ズームイン確認 {
        0% {

            変換: スケール(0);
        }
        60% {
            変換: スケール(1.1);
        }
        100% {
            変換: スケール(1);
        }
    }
    @keyframes ズームアウトの確認 {
        0% {
            変換: スケール(1);
        }
        30% {
            変換: スケール(0.4);
        }
        100% {
            変換: スケール(0);
        }
    }

</スタイル>
</html>

レイアウト

修正版

レイアウト
ここに画像の説明を挿入

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="utf-8">
  <title>Vue3</title>
  <script src="./vue.js"></script>
</head>
<本文>
<div id="hello-vue" クラス="box">
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <div>私は親コンポーネントです</div>
  <button @click="handleClick">クリックするとサブコンポーネントが表示されます</button>
  <cpn ref="compRef" @show-confirm="showConfirm"></cpn>
  <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="終了してもよろしいですか?"></confirm>
</div>
<!--ボタンをクリックした後に表示されるコンポーネント-->
<テンプレートid="mycpn">
  <テレポート先="body">
    <トランジション名="リストフェード">
      <div class="cpnContainer" v-show="isshow" @click.stop="handleClose()">
        <div class="inner-wrapper" @click.stop>
          トランジションの使用
          <div class="text">
            <div>私はインナーテキストです</div>
            <div>私はインナーテキストです</div>
            <div>私はインナーテキストです</div>
            <div>私はインナーテキストです</div>
            <div>私はインナーテキストです</div>
          </div>
          <div class="close" @click="handleClose()">閉じる</div>
        </div>
      </div>
    </トランジション>
  </テレポート>


</テンプレート>

<!--確認コンポーネントを閉じるには確認します-->
<テンプレートid="確認">
  <テレポート先="body">
    <transition name="確認フェード">
      <div v-show="isshow" class="confirm">
        <div class="confirm-wrapper">
          <div class="コンテンツを確認">
            <p>{{テキスト}}</p>
            <div class="btnContainer">
              <button style="background-color: darkseagreen;margin-right: 40px" @click="confirm">{{confirmBtnText}}</button>
              <button @click="cancel">{{cancelBtnText}}</button>
            </div>
          </div>
        </div>
      </div>
    </トランジション>
  </テレポート>

</テンプレート>
<スクリプト>
  定数cpn = {
    テンプレート: "#mycpn",
    プロパティ: {},
    データ（） {
      戻る {
        // bbb: 145612
        isshow: false
      }
    },
    メソッド: {
      見せる（） {
        this.isshow = true
      },
      隠れる（） {
        // console.log("非表示")
        this.isshow = false
      },
      ハンドルクローズ() {
        // console.log("非表示")
        this.$emit("表示確認")
      },

    }
  }

  定数確認 = {
    テンプレート: "#confirm",
    小道具: {
      文章： {
        タイプ: 文字列、
        デフォルト: 'fdsafdasfdas'
      },
      確認ボタンテキスト: {
        タイプ: 文字列、
        デフォルト: 'OK'
      },
      キャンセルボタンテキスト: {
        タイプ: 文字列、
        デフォルト: 'キャンセル'
      }
    },
    データ（） {
      戻る {
        // bbb: 145612
        isshow: false
      }
    },
    メソッド: {
      見せる（） {
        this.isshow = true
      },
      隠れる（） {
        this.isshow = false
        //サブコンポーネントの表示を制御する},
      // ボタンをクリックした後、親コンポーネントにイベント confirm() をディスパッチします {
        これを非表示にします。
        this.$emit("確認")
      },
      キャンセル（） {
        これを非表示にする()
        this.$emit('キャンセル')
      }
    }
  }
  定数 HelloVueApp = Vue.createApp({
    データ（） {
      戻る {
        メッセージ: 'Hello Vue!!'
      }
    },
    コンポーネント:
      cpn、
      確認する
    },
    メソッド: {
      ハンドルクリック() {
        // 親コンポーネントは子コンポーネントのメソッドを呼び出します // this.$refs.compRef.show()
        this.$refs.compRef.show()
      },
      確認を表示（）{
        コンソールログ("fdsa")
        this.$refs.confirmRef.show()
      },
      // キャンセルまたは確認をクリックして次のロジックを実行します handleConfirm() {
        this.$refs.compRef.hide()
      },
      ハンドルキャンセル() {

      }
    }
  }).mount("#hello-vue")

</スクリプト>
</本文>
<スタイル>
    * {
        フォントサイズ: 50px;
    }

    /*vue 組み込みトランジション*/
    .list-fade-enter-active、.list-fade-leave-active {
        遷移: 不透明度 .3 秒;
    }

    .list-fade-enter-active .inner-wrapper、.list-fade-leave-active .inner-wrapper {
        遷移: すべて .3;
    }

    .list-fade-enter-from、.list-fade-leave-to {
        不透明度: 0;
    }

    .list-fade-enter-from .inner-wrapper、.list-fade-leave-to .inner-wrapper {
        変換: translate3d(0, 100%, 0);
    }


    /*サブコンポーネントスタイル*/
    .cpnコンテナ{
        位置: 固定;
        上: 0;
        下部: 0;
        左: 0;
        右: 0;
        背景: rgba(0, 0, 0, .3);
    }

    .インナーラッパー{
        パディング: 70px;
        背景色: ダークシアン;
        位置: 固定;
        下部: 0;
        幅: 100%;
        ボックスのサイズ: 境界線ボックス;
    }

    。近い {
        位置: 絶対;
        上: 50px;
        右: 50px;
    }

    /*コンポーネントのスタイルを確認*/
    。確認する {
        位置: 固定;
        上: 0;
        下部: 0;
        左: 0;
        右: 0;
        背景色: rgba(0, 0, 0, 0.14);
    }

    .btnコンテナ{
        パディング: 0 70px;
    }
    .confirm-wrapper{
        位置: 絶対;
        上位: 50%;
        左: 50%;
        変換: translate(-50%, -50%);
        zインデックス: 999;
        ボックスの影: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);
    }
    .内容確認{
        オーバーフロー: 非表示;
        幅: 600ピクセル;
        境界線の半径: 13px;
        背景: 白
    }
    .confirm-content p {
        表示: ブロック;
        左パディング: 40px;
    }

    /*.内容確認 {*/
    /* 境界線の半径: 8px;*/
    /* ボックスシャドウ: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);*/
    /* 位置: 絶対;*/
    /* 上: 50%;*/
    /* 残り: 50%;*/
    /* 変換: translate(-50%, -50%);*/
    /* !*p タグの上部の余白は親要素 bfc に影響します*!*/
    /* !*オーバーフロー: 非表示;*!*/
    /* 背景色: 白;*/
    /*}*/

    .confirm-content ボタン {
        境界線: 1px 実線 コーンフラワーブルー;
        背景色: 透明;
        パディング: 25px 50px;
        下部マージン: 30px;
        境界線の半径: 5px;
    }
    .confirm-fade-enter-active、.confirm-fade-leave-active {
        遷移: すべて .3;
    }
    .confirm-fade-enter-from 、.confirm-fade-leave-to{
        不透明度: 0;
    }
    .confirm-fade-enter-active .confirm-content {
        アニメーション: ズームイン確認 .3s;
        変換の原点: 中心;
    }
    .confirm-fade-leave-active .confirm-content {
        アニメーション: ズームアウトの確認 .3 秒;
        変換の原点: 中心;
    }

    @keyframes ズームイン確認 {
        0% {

            変換: スケール(0);
        }
        60% {
            変換: スケール(1.1);
        }
        100% {
            変換: スケール(1);
        }
    }
    @keyframes ズームアウトの確認 {
        0% {
            変換: スケール(1);
        }
        30% {
            変換: スケール(0.4);
        }
        100% {
            変換: スケール(0);
        }
    }

</スタイル>
</html>

この事件で使用された知識

親コンポーネントはどのようにして子コンポーネントのメソッドを呼び出すのでしょうか? ref を使用してコンポーネントを取得し、コンポーネント内のメソッドを呼び出します。
バブリングする子コンポーネントが親コンポーネントにイベントを送信するのを防ぐイベントについて（emit）
ボックスシャドウ
Vue トランジションアニメーションに関する質問: 確認ズームアニメーションをコンテナーに配置できず、コンテンツにのみ配置できるのはなぜですか?

これで、vue3 テレポートの使用デモに関するこの記事は終了です。vue3 テレポートの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: