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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
  • Vue3 での Teleport の使用に関する詳細な説明
  • vue3のテレポート瞬間移動機能の使い方を詳しく解説

<<:  基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)

>>:  Navicatをサーバー上のdockerデータベースに接続する方法

推薦する

HTML における <meta> タグの使用に関する詳細な説明

私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...

一般的なMySQLコマンドの概要

mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...

MySQLの一般的なバックアップコマンドとシェルバックアップスクリプトの共有

複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...

複数のフィールドを変更するためのMysql更新の構文の詳細な分析

MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...

Linux における SUID、SGID、SBIT の素晴らしい使い方の詳細な説明

序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...

IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...

データベース内のSQL整合性制約ステートメントの分析

整合性制約整合性制約はテーブル データの正確性を保つためのものです。データが正しくない場合は、そもそ...

Docker による Oracle 11g イメージ構成のプルに関する詳細なチュートリアル

さっそくAlibaba の oracle11g イメージをプルして構成する docker の記録を開...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

SELINUXの動作原理の詳細な説明

1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...

MySQL スロークエリログの詳細な理解

目次スロークエリログとは何ですか?スロークエリを有効にする方法ログ分析ツール mysqldumpsh...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...