Vue3 を使用してポップアップ コンポーネントをカプセル化するのは簡単ですか?

最初に要約:

ヒント: カプセル化されたポップアップ コンポーネントは、コンポーネントのネストによって発生する可能性のある配置階層の隠れた危険を回避するために Teleport を使用します。また、defineProps、defineEmits、およびスロットを使用して、コンポーネントの拡張性を高めます。

🌲🌲 序文:

これまで自分でポップアップ ウィンドウ コンポーネントをカプセル化したことはありませんが、小さなポップアップ ウィンドウ コンポーネントでも決して小さな問題ではないと思います。そして今日、新しいプロジェクトでポップアップ コンポーネントが必要になったので、それを作成しました。やらなくても問題ありません。一度やってみれば、まだまだ小さな問題がたくさんあることに気づき、遭遇した問題を大企業と共有するのです。

まず、世界的に使用されるパブリック ポップアップ ウィンドウ コンポーネントの要件を確認しましょう。次に、パブリック、グローバル、ポップアップウィンドウといういくつかの重要なポイントがあります。これらの重要なポイントに基づいて、ポップアップウィンドウコンポーネントを少しずつ実装してみましょう。

🍬🍬公開🍬🍬

これは非常に簡単です。ここにいる大物たちなら誰でも簡単にできると思います。

まずメインコンテンツを実装します。私の方法は、スロットとパラメータの受け渡しを使用することです。この例では、タイトル コンテンツと、オンかオフかを制御するブール値の 2 つのパラメーターを渡すだけです。主に、defineProps、defineEmits、slots という 2 つの Vue3 API を使用します。

<テンプレート>
    <Mask @click="close" /> // マスクレイヤー <div class="modal_all" v-if="visible">
        <slot name="header"> // ページにカスタムヘッダーを追加するのに便利です<div class="modal_header">
                <p class="modal_header_title">{{ タイトル }}</p>
                <p class="modal_header_img" @click="閉じる"></p>
            </div>
        </スロット>
        <div class="modal_content">
            <slot></slot> //ポップアップコンテンツを開く</div>
    </div>
</テンプレート>
<script lang="ts" セットアップ>
定義プロパティ({
    見える：
        タイプ: ブール値、
        デフォルト: false、
    },
    タイトル：
        タイプ: 文字列、
    },
});
const 出力 = defineEmits(['update:visible']);
定数close = () => {
    出力('update:visible', false);
};
</スクリプト>
// スタイル省略

🍬🍬グローバル🍬🍬

基本的なレイアウトはほぼ完了しており、次はグローバル登録です。目的は、使用するたびに導入する必要がないようにすることです。

vue2 でグローバル コンポーネントを登録する場合は、Vue.component('name', component) を使用するだけです。では、vue3 でグローバル コンポーネントをバッチで登録するにはどうすればよいでしょうか? app.use() を使用して自動的に呼び出されるインストール メソッドを提供します。

'./Modal/Modal.vue' から Modal をインポートします。
'./Modal/Mask.vue' からマスクをインポートします。

// スクリプト設定で名前を書くことはできないので、const coms = [ を追加します。
  {
    name: 'Modal', // コンポーネント名を使用します compent: Modal,
  },
  {
    名前: 'マスク'、
    コンポーネント: マスク、
  },
];

エクスポートデフォルト{
  インストール: (アプリ) => {
    coms.forEach((アイテム) => {
      app.component(アイテム名、アイテムコンポーネント);
    });
  },
};

//メイン.ts
'./common/index' から Common をインポートします。
const app = createApp(App);
app.use(共通);

🍬🍬ボールボックス🍬🍬

実際、ポップアップ ウィンドウ コンポーネントはここに記述されているので、ポップアップ ウィンドウを別途リストする必要があるのはなぜでしょうか?

皆さんも日々の業務で配置や階層の問題に遭遇したことがあると思います。配置が必要なコンポーネントを Vue コンポーネント内にネストすると、CSS のさまざまなレイヤーにより、ネストされた配置、階層、スタイルを処理するのが非常に難しくなります。注意しないと、奇妙な問題が発生します。では、この問題を回避するにはどうすればよいでしょうか。次に、Vue3 の別のポータル API、Teleport を使用します。

ヒント: テレポートは、ポータルと同様に、属性に対応する DOM 要素にコンポーネントをマウントします。

まずコード:

<teleport to="#mask_modal" v-if="visible">
    <div class="modal_cent">
        <マスク @click="閉じる" />
            <div class="modal_all">
                <スロット名="ヘッダー">
                    <div class="header">
                        <p class="header_title">{{ タイトル }}</p>
                        <p class="header_img" @click="閉じる"></p>
                    </div>
                </スロット>
            <div>
            <スロット></スロット>
            </div>
        </div>
    </div>
</テレポート>

これを書いた後の階層を見てみましょう:

to 属性を使用して、箇条書きボックス コンポーネントのレンダリングの位置がレイアウト コンポーネントと同じレベルになるように指定しますが、テレポートの表示ステータスは、呼び出すコンポーネントによって完全に制御されるため、コンポーネントをネストするときに階層スタイルの配置に関する問題を回避できます。

🌼🌼 これまでのところ、シンプルなパブリック ポップアップ コンポーネントがほぼ作成されました。その後、このコンポーネントを作成する過程で、問題とは見なされていなかったいくつかの問題に遭遇しました 😅。

❗️❗️❗️1. スクリプト設定では name 属性を書き込むことはできません。

ts を使用しない場合は、別のスクリプトタグを記述してエクスポートし、名前を記述することもできます。 ts を使用すると、このメソッドは機能せず、エラーが報告されます。次に、上で書いた方法を使用して、自分で再定義し、オブジェクトを記述します。

❗️❗️❗️2. グローバル コンポーネントにクラスとスタイルを直接追加しても機能しません。

実は、通常、パブリック コンポーネントを作成するときに、内部コンテナーのスタイルを、それが使用される外側のレイヤーで直接制御したい場合は、外側にクラス名を直接追加してスタイルを高めることができます。 しかし、このポップアップ コンポーネントを作成していたとき、それが機能しませんでした。長い間検索した後、テレポートを使用したため、解析時にクラスを継承できなかったことが原因であることがわかりました。コンポーネントにルート コンポーネントがない場合も、同じ問題が発生します。これは実際には問題ではありません。スロットにコンテンツを書き込むだけで、自動的に拡張されます。皆さんは私のような愚かな操作を行わないと信じています（笑）。

🎉🎉🎉結論:

実際、ポップアップ コンポーネントのカプセル化はまだ非常に単純ですが、ある程度の経験を積み、独自のプロジェクトを実装したものと見なすことができます。後でより複雑なコンポーネントをカプセル化するのが簡単になります。

これで、Vue3 を使用してポップアップ ウィンドウ コンポーネントをカプセル化する方法についての記事は終了です。Vue3 でカプセル化されたポップアップ ウィンドウ コンポーネントに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。