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 インストール チュートリアルの実装

推薦する

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

要件:PC側とモバイル側は2つの独立したプロジェクトです。2つのプロジェクトの内容は基本的に同じで、...

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

MySQLとRedisでセカンダリキャッシュを実装する方法の詳細な説明

Redis の紹介Redis は完全にオープンソースで無料であり、BSD プロトコルに準拠しており、...

CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...

DockerコンテナがJupyterにアクセスできない問題の解決策

このプロジェクトでは、環境を構築するために Docker コンテナを使用します。Dockerfile...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

Mysqlの自動増分IDについて知らないことがあるかもしれません

導入: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (AUT...

Nginx アクセス ログとエラー ログ パラメータの説明

例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...

Vueバスの簡単な使い方

Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...

vue+iviewのメニューとタブの連携方法

Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...

ウェブページの読みやすさを向上させるいくつかの方法

1. 対照的な色を使用します。ここでのコントラストとは、テキストの色と背景色のコントラストを指します...