序文: コンポーネントのテンプレートの一部が論理的にはそのコンポーネントに属している場合もありますが、技術的な観点からは、テンプレートのこの部分を Vue アプリ外の シナリオ例:クリックするとモーダルダイアログボックスを開く このモーダル ダイアログ ボックスのビジネス ロジックの場所は間違いなくこの これにより問題が発生します。コンポーネントの論理的な位置が これまでの 1. テレポートの使用使い方は非常に簡単です。コンポーネントを目的の位置にレンダリングするには、to 属性を使用するだけです。 // body タグにレンダリングします <teleport to="body"> <div class="modal"> 私はテレポートしたモーダルです! </div> </テレポート> 以下も使用できます: <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> 有効なクエリセレクターまたは さらに遠く 2. モーダルダイアログコンポーネントを完成させるでは、標準のモーダルダイアログボックスをカプセル化してみましょう <テンプレート> <テレポート先="body"> <トランジション名="ダイアログフェード"> <div class="dialog-wrapper" v-show="visible"> <div class="ダイアログ"> <div class="ダイアログヘッダー"> <スロット名="タイトル"> <span class="ダイアログタイトル"> {{ タイトル }} </span> </スロット> </div> <div class="ダイアログボディ"> <スロット></スロット> </div> <div class="ダイアログフッター"> <スロット名="フッター"> <button @click="onClose">閉じる</button> </スロット> </div> </div> </div> </トランジション> </テレポート> </テンプレート> <スクリプト> 'vue' から defineComponent をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'tdialog' }); </スクリプト> <スクリプトの設定> const props = defineProps({ タイトル: 文字列、 表示: ブール値 }); const 出力 = defineEmits(['close']); 定数 onClose = () => { 出力('閉じる'); }; </スクリプト> 使用する際は、 <t-dialog title="LGD は無敵です" :visible="visible" @close="onClose"> これはコンテンツの一部です、Xiaose Xianbei。 </t-ダイアログ> // ... const 可視 = ref(false); 定数onDialog = () => { 表示される値 = !表示される値; }; 定数 onClose = () => { 表示値 = false; }; さらに一歩進んで 3. コンポーネントのレンダリング上記で、標準のモーダル ダイアログ コンポーネントが完成しました。少量のテキストのみを表示する、同様の軽量プロンプト コンポーネント 上記の例では、 // プロンプトを呼び出します Message({ message: 'This is a Message' }); 関数を使用して呼び出す場合は、この関数を準備する必要があります。この関数の機能は、コンポーネントのレンダリングを完了することです。 const メッセージ = オプション => { // コンテナをレンダリングする準備をする const container = document.createElement('div'); // vnode を生成する const vnode = createVNode(メッセージコンストラクタ、オプション); // レンダリングレンダー(vnode, コンテナ); };
<テンプレート> <テレポート先="#app"> <transition name="メッセージフェード"> <div v-show="visible" ref="ins" class="message" :style="customStyle">{{ メッセージ }}</div> </トランジション> </テレポート> </テンプレート> オンライン体験 コードを表示 要約: 以上が、私たちに多くの利便性を提供してくれる 以下もご興味があるかもしれません:
|
<<: スライドドアを実装するための CSS サンプルコード
>>: dockerコンテナにviコマンドをインストールする簡単な操作
序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...
1. 1列を変更する 学生の更新、都市c s.city_name = c.name を設定します こ...
キーペアの分離1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。...
この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...
私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私...
以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...
Apollo オープンソース アドレス: https://github.com/ctripcorp/...
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...
Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
html <div> 要素 <button type="button&q...
国慶節の休暇後、Windows アップデート後に VMware 仮想マシンが開けなくなり、「VMwa...
背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...
イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...