1. テレポートについて知るたとえば、Teleport を使用せずに、Modal コンポーネント、Message コンポーネント、Loading コンポーネントなどのグローバル コンポーネントを記述し、それらを .vue ファイルに導入すると、それらの HTML 構造がコンポーネント テンプレートに追加され、完璧ではありません。
以下は、Teleportを使用してモーダルコンポーネントを開発する方法の実践的な紹介です。 2. テレポートの基本的な使い方Teleport の書き方は非常に簡単です。コンテンツを <Teleport></Teleport> で囲み、どの親ノードの下に HTML を配置するかを指定するだけです。 <テレポート先="#modal"> コンテンツ</teleport> 3. 最初のステップの最適化Teleport がマウントする DOM をコード内にハードコードすると、グローバル コンポーネントが作成されるたびに DOM ノードが必要になり、その数はどんどん増えて、常に存在することになります。この記述方法はあまりエレガントではありません。より良い解決策は次のとおりです。
設定(){ 定数ノード = 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">×</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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: mysql8.0.12 でルートパスワードをリセットする方法
>>: Ubuntu 18.04 での Pycharm インストール チュートリアルの実装
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
要件:PC側とモバイル側は2つの独立したプロジェクトです。2つのプロジェクトの内容は基本的に同じで、...
1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...
目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...
Redis の紹介Redis は完全にオープンソースで無料であり、BSD プロトコルに準拠しており、...
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...
このプロジェクトでは、環境を構築するために Docker コンテナを使用します。Dockerfile...
1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
導入: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (AUT...
例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...
Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...
Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...
1. 対照的な色を使用します。ここでのコントラストとは、テキストの色と背景色のコントラストを指します...