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

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

1. テレポートについて知る

たとえば、Teleport を使用せずに、Modal コンポーネント、Message コンポーネント、Loading コンポーネントなどのグローバル コンポーネントを記述し、それらを .vue ファイルに導入すると、それらの HTML 構造がコンポーネント テンプレートに追加され、完璧ではありません。

  • テレポートなし

  • テレポート

以下は、Teleportを使用してモーダルコンポーネントを開発する方法の実践的な紹介です。

2. テレポートの基本的な使い方

Teleport の書き方は非常に簡単です。コンテンツを <Teleport></Teleport> で囲み、どの親ノードの下に HTML を配置するかを指定するだけです。

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

3. 最初のステップの最適化

Teleport がマウントする DOM をコード内にハードコードすると、グローバル コンポーネントが作成されるたびに DOM ノードが必要になり、その数はどんどん増えて、常に存在することになります。この記述方法はあまりエレガントではありません。より良い解決策は次のとおりです。

  • コンポーネントを作成するときに、DOM ノード document.createElement() を動的に作成します。
  • そしてそれを本文に追加します。document.body.appendChild()、
  • コンポーネントがアンインストールされたら、この dom document.body.removeChild() を破棄します。
設定(){
  定数ノード = document.createElement('div')
  node.id = 'モーダル'
  document.body.appendChild(ノード)
  マウント解除時(() => {
    document.body.removeChild(ノード)
  })
}

4. 第2段階の最適化

将来、Message コンポーネント、Loading コンポーネント、その他の機能を追加する場合は、Teleport も使用する必要があります。各コンポーネントにこのようなコードを記述するのは少し冗長です。Vue3 を使用すると、論理関数を簡単に抽出できるため、ロジックの再利用の目的を達成できます。

このロジックをカプセル化するために、src-hooksフォルダにuseDOMCreate.tsファイルを作成します。

// フック/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('モーダル')
}

5. モーダルコンポーネントを実装する

Modal コンポーネントをカプセル化する詳細についてはここでは説明しません。また、複雑なロジックはありません。コードに直接。

//モーダル.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、
      ハンドルモーダル確認、
      ハンドル削除、
      モーダル表示可能
    }
  }
})
</スクリプト>

上記は、vue が Teleport に基づいて Modal コンポーネントを実装する方法の詳細です。vue Teleport が Modal コンポーネントを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue3 での Teleport の使用に関する詳細な説明
  • vue3のテレポート瞬間移動機能の使い方を詳しく解説
  • Vue3 Teleportの実践と原理の詳細な説明
  • Vue3 でダイアログとモーダル コンポーネントをカスタマイズする方法
  • 手書きの Vue ポップアップ ウィンドウ モーダル実装コード
  • vueコンポーネントのiviewのモーダルコンポーネントには問題があります。モーダルが表示されるかどうかに関係なく、v-showを使用する必要があります。

<<:  mysql8.0.12 でルートパスワードをリセットする方法

>>:  Ubuntu 18.04 での Pycharm インストール チュートリアルの実装

推薦する

Navicat Premier の MySQL へのリモート接続エラー 10038 の解決方法

MySQL へのリモート接続が失敗する場合は、次の理由が考えられます。 1. 若い男性/女性の方は、...

VirtualBox を使用して Mac 上にローカル仮想マシン環境を構築する方法

1. ビッグデータとHadoopビッグデータについて研究し学ぶには、当然 Hadoop から始める必...

MySQL: MySQL 関数

1. 組み込み関数1. 数学関数ランド()丸め(数値) ceil(数値)階数(数値)ランダム丸め切り...

MySQL の大きなデータ テーブルにフィールドを追加する方法

序文フィールドの追加は誰でもよく知っていると思います。簡単に記述できます。MySQL テーブルにフィ...

HTMLインライン要素とブロックレベル要素の基本概念と使用例

HTML タグには、インライン要素とブロックレベル要素の 2 種類があります。まず、インライン要素と...

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

VMware インストール エラー VMware Workstation が VMware 認証サービスを開始できませんでした

背景: SAP ECC サーバーをインストールし、XP をプレインストールしたいと考えています。XP...

MySQL における count(*)、count(1)、count(col) の違いのまとめ

序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...

ホバー画像のポップアウトポップアップ効果を実現するための純粋な CSS のサンプルコード

実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...

マウス追従ゲームを実現するjs

この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

MySQL パーティション フィールド列に別のインデックスを作成する必要がありますか?

序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

Vue2 と Vue3 でウォッチ リスナーを使用する方法

watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...

Vue の双方向イベントバインディング v-model の原理についての簡単な説明

目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...