VUEで再利用可能なモーダルコンポーネントを構築する方法は？

再利用可能なVueモーダルボックスコンポーネントを作成し、最初にModal.vueをマスク層、タイトル、コンテンツ、ボトムスロットなど、ベースコンテナとして定義します。 2。スロットを使用して柔軟性を実現し、ヘッダー、デフォルト、フッタースロットを介してコンテンツをカスタマイズします。 3。ディスプレイを制御し、Vモデルを非表示にします：親コンポーネントのISOPENバインディングは、双方向通信を実現します。 4.オプションの拡張機能には、トランジションアニメーションの追加、ESCキークロージング、フォーカスロック、カスタマイズクラス名が含まれます。最後に、アプリケーション範囲全体に適した、再利用可能でカスタマイズ可能でアクセス可能なモーダルボックスコンポーネントを取得します。

VUEで再利用可能なモーダルコンポーネントを構築することは、アプリ全体でUIとロジックを複製することを避けるための実用的な方法です。よく構成されたモーダルは、アラート、フォーム、確認、または現在のビューの上に表示する必要があるコンテンツに使用できます。柔軟で清潔で、簡単に再利用できるものを作成する方法は次のとおりです。

1.ベースモーダルコンポーネントを作成します

Modal.vueコンポーネントを作成することから始めます。これはあなたの再利用可能な容器になります。

 <！ -  Components/Modal.vue->
<テンプレート>
  <div v-if = "isopen" class = "modal-overlay" @click = "handle overlayclick">
    <div class = "modal"：style = "{width}" @click.stop>
      <！ - ヘッダー - >
      <div v-if = "$ slots.header || title" class = "modal-header">
        <スロットname = "header">
          <h3> {{title}} </h3>
        </slot>
        <button @click = "close" class = "modal-close">＆times; </button>
      </div>

      <！ - ボディ - >
      <div class = "modal-body">
        <スロット />
      </div>

      <！ - フッター - >
      <div v-if = "$ slots.footer" class = "modal-footer">
        <スロット名= "フッター" />
      </div>
    </div>
  </div>
</テンプレート>

<スクリプトのセットアップ>
{vue &#39;から{defineProps、defineEmits}をインポート

const emit = defineemits（[&#39;update：isopen&#39;、 &#39;close&#39;]）

const props = defineProps（{
  ISOPEN：{
    タイプ：Boolean、
    必須：true
  }、
  タイトル： {
    タイプ：文字列、
    デフォルト： &#39;&#39;
  }、
  幅： {
    タイプ：文字列、
    デフォルト： &#39;500px&#39;
  }、
  closeonclickoutside：{
    タイプ：Boolean、
    デフォルト：true
  }
}）

const close =（）=> {
  Emit（ &#39;Update：Isopen&#39;、False）
  エミット（ &#39;close&#39;）
}

const handlelayclick =（）=> {
  if（props.closeonclickoutside）{
    近い（）
  }
}
</script>

<スタイルスコープ>
.modal-overlay {
  位置：修正;
  上：0;
  左：0;
  幅：100％;
  高さ：100％;
  背景色：RGBA（0、0、0、0.5）;
  ディスプレイ：Flex;
  justify-content：center;
  Align-Items：Center;
  z-index：1000;
}

.modal {
  背景：白。
  ボーダーラジウス：8px;
  Box-Shadow：0 4px 20px RGBA（0、0、0、0.2）;
  Max-Height：90VH;
  Overflow-y：auto;
}

.modal-header {
  ディスプレイ：Flex;
  justify-content：space-bethed;
  Align-Items：Center;
  パディング：16px 24px;
  ボーダーボトム：1px solid #eee;
}

.Modal-Header H3 {
  マージン：0;
  フォントサイズ：1.25rem;
}

.Modal-Close {
  背景：なし;
  国境：なし;
  フォントサイズ：1.5rem;
  カーソル：ポインター;
  色：＃999;
}

.Modal-Close：Hover {
  色：＃333;
}

.modal-body {
  パディング：24px;
}

.modal-footer {
  パディング：16px 24px;
  ボーダートップ：1px solid #eee;
  テキストアライグ：右;
}
</style>

2.スロットを使用して、柔軟性を最大限に活用します

コンポーネントは、VUEの名前付きスロット（ header 、デフォルトbody 、 footer ）を使用するため、ベースロジックを変更せずにコンテンツをカスタマイズできます。

• デフォルトスロット：メインコンテンツ。
• headerスロット：タイトル領域を交換または強化します。
• footerスロット：「キャンセル」や「保存」などのアクションボタンを追加します。

これにより、フォーム、確認、または情報ポップアップのモーダル作業が行われます。

3.親コンポーネントのモーダルを使用します

v-modelスタイルのバインディングでどこにでも使用します。

 <！ -  parentComponent.vue->
<テンプレート>
  <div>
    <button @click = "showmodal = true"> modalを開く</button>

    <Modal V-Model：Isopen = "ShowModal" Title = "ユーザーの詳細">
      <p>以下のユーザー情報を入力してください：</p>
      <入力v-model = "name" placeholder = "name" class = "input" />

      <テンプレート#footer>
        <button @click = "showmodal = false" class = "btn btn-secondary"> cancel </button>
        <ボタン @click = "save" class = "btn btn-primary"> save </button>
      </テンプレート>
    </modal>
  </div>
</テンプレート>

<スクリプトのセットアップ>
&#39;vue&#39;から{ref}をインポート
&#39;@/components/modal.vue&#39;からモーダルをインポートする

const showmodal = ref（false）
const name = ref（ &#39;&#39;）

const save =（）=> {
  アラート（ `saved：$ {name.value}`）
  showmodal.value = false
}
</script>

これは、 v-model:isOpen update:isOpenイベントを使用します。

4.オプションの拡張機能

さらにモーダルを改善できます。

• 遷移の追加：滑らかなフェードイン/アウトエフェクトのために、モーダルを<transition>でラップします。

   <トランジション名= "modal-fade">
    <div v-if = "isopen" class = "modal-overlay">
      <！ - モーダルコンテンツ - >
    </div>
  </transition>

• トラップフォーカス（アクセシビリティ）：ディレクティブまたはライブラリを使用して、モーダル内でキーボードフォーカスをトラップします。

• ESCキークローズ： onMountedにキーリスナーを追加します：

   const handleesc =（e）=> {
    if（e.key === 'escase'）close（）
  }
  onmounted（（）=> window.addeventlistener（ 'keydown'、handleESC）））
  onunmounted（（）=> window.removeeventlistener（ 'keydown'、handleESC））

• カスタムクラスのパス： modalClassプロップを追加して、内側のモーダルボックスを動的にスタイリングします。

---

最終メモ

このモーダルは次のとおりです。

• アプリ全体で再利用可能
• スロット経由でカスタマイズ可能
• v-modelを介して制御可能
• アクセスしやすくてきれい

必要に応じて、グローバルモーダル状態には、UIライブラリに抽出するか、Pinia/Vuexで使用できます。

基本的に、 isOpen合格し、更新を聞いて、コンテンツをプラグインするだけです。それでおしまい。

以上がVUEで再利用可能なモーダルコンポーネントを構築する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。