VUEでモーダルまたはダイアログコンポーネントを作成する方法は？

Modal.vueコンポーネントを作成し、構成APIを使用してモデル数とタイトルを受信するプロップを定義し、EMITを使用して更新をトリガーして、ModelValueイベントをトリガーしてVモデルの双方向結合を実現します。 2。スロットを使用してテンプレートにコンテンツを配布し、デフォルトのスロットと名前付きスロットヘッダーとフッターをサポートします。 3. @click.selfを使用して、マスクレイヤーをクリックしてポップアップウィンドウを閉じます。 4.親コンポーネントにモーダルをインポートし、REFを使用してディスプレイを制御して非表示にし、V-Modelと一緒に使用します。 5.オプションの拡張機能には、エスケープキークローズを聴くこと、トランジションアニメーションの追加、フォーカスロックが含まれます。このモーダルボックスコンポーネントは、優れた再利用性、柔軟性、および基本的なユーザーエクスペリエンス保証を備えており、VUE 3ベースの再利用可能なモーダルボックスソリューションを完全に実現します。

VUEでモーダルまたはダイアログコンポーネントを作成することは簡単で、再利用可能でクリーンな方法で実行できます。 VUE 3（Composition API）を使用して構築する方法は次のとおりですが、コンセプトはVUE 2でも同様に機能します。

✅1。モーダルコンポーネントを作成します

Modal.vueファイルを作成することから始めます。

 <！ -  modal.vue->
<テンプレート>
  <div class = "modal-overlay" v-if = "modelvalue" @click.self = "onclose">
    <div class = "modal">
      <div class = "modal-header">
        <スロットname = "header">
          <h3> {{title}} </h3>
        </slot>
        <button @click = "close">✕</button>
      </div>

      <div class = "modal-body">
        <スロット />
      </div>

      <div class = "modal-footer">
        <スロットname = "Footer">
          <ボタン @クリック= "close">閉じる</button>
        </slot>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプトのセットアップ>
const props = defineProps（{
  ModelValue：{
    タイプ：Boolean、
    必須：true
  }、
  タイトル： {
    タイプ：文字列、
    デフォルト：「モーダル」
  }
}）;

const emit = defineemits（[&#39;update：modelvalue&#39;]）;

関数close（）{
  Emit（ &#39;Update：ModelValue&#39;、false）;
}

function onclose（）{
  //背景（オーバーレイ）がクリックされている場合にのみ閉じます
  近い（）;
}
</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;
  幅：90％;
  最大幅：500px;
  Box-Shadow：0 10px 30px RGBA（0、0、0、0.3）;
}

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

.Modal-Header H3 {
  マージン：0;
  Font-Size：1.2Rem;
}

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

.modal-body {
  パディング：1.5rem;
}

.modal-footer {
  パディング：1REM 1.5REM;
  ボーダートップ：1px solid #eee;
  テキストアライグ：右;
}

.modal-footerボタン{
  パディング：0.5REM 1REM;
  背景：＃007bff;
  色：白;
  国境：なし;
  ボーダーラジウス：4px;
  カーソル：ポインター;
}
</style>

✅2。親コンポーネントのモーダルを使用します

次に、 v-modelを使用して任意のコンポーネントで使用します。

 <！ -  app.vueまたは任意の親 - >
<テンプレート>
  <div>
    <button @click = "showmodal = true"> modalを開く</button>

    <モーダルv-model = "showmodal" title = "私のダイアログ">
      <p>これはモーダルコンテンツです。ここに何でも置くことができます。</p>

      <テンプレート#footer>
        <button @click = "showmodal = false">キャンセル</button>
        <ボタン @クリック= "確認">確認</button>
      </テンプレート>
    </modal>
  </div>
</テンプレート>

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

const showmodal = ref（false）;

function cunsile（）{
  alert（ &#39;confirmed！&#39;）;
  showmodal.value = false;
}
</script>

✅重要な機能が説明されています

• v-modelバインディング： modelValue Propとupdate:modelValueイベントを双方向バインディングに使用します。
• 外側をクリックして閉じます。オーバーレイ（ modal-overlay ）はクリック用に耳を傾けますが、 @click.self 、背景（モーダル自体ではなく）がクリックされたときにのみトリガーします。
• スロット：柔軟なコンテンツを許可します：
  • ボディのデフォルトスロット
  • ヘッダー/フッター用の名前付きスロット
• アクセシビリティとUX ：閉じるボタン、クリーンレイアウト、レスポンシブ幅。

optionオプションの拡張機能

追加したいかもしれません：

• エスケープキーサポート：

   watcheffect（（）=> {
    if（propss.modelvalue）{
      const handler =（e）=> e.key === 'Escape' && close（）;
      window.addeventlistener（ 'keydown'、handler）;
      onunmounted（（）=> window.removeeventlistener（ 'keydown'、handler））;
    }
  }）;

• 滑らかなフェードイン/アウトのための<transition></transition>を使用した遷移。
• より良いアクセシビリティのために、モーダル内にトラッピングをフォーカスします。

---

それでおしまい。これで、ビューに再利用可能で柔軟なモーダルコンポーネントがあり、簡単にカスタマイズして統合できます。基本的にv-modelを渡してコンテンツをドロップします。



以上がVUEでモーダルまたはダイアログコンポーネントを作成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。