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 インストール チュートリアルの実装
MySQL へのリモート接続が失敗する場合は、次の理由が考えられます。 1. 若い男性/女性の方は、...
1. ビッグデータとHadoopビッグデータについて研究し学ぶには、当然 Hadoop から始める必...
1. 組み込み関数1. 数学関数ランド()丸め(数値) ceil(数値)階数(数値)ランダム丸め切り...
序文フィールドの追加は誰でもよく知っていると思います。簡単に記述できます。MySQL テーブルにフィ...
HTML タグには、インライン要素とブロックレベル要素の 2 種類があります。まず、インライン要素と...
【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...
背景: SAP ECC サーバーをインストールし、XP をプレインストールしたいと考えています。XP...
序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...
実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...
1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...
序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...
まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...
watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...
目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...