Vue でポップアップ レイヤーとモーダル ボックスを実装するにはどうすればよいですか?

Vue は、シングルページ アプリケーション (SPA) インターフェイスとユーザー インタラクションを構築するための多くの便利なツールとコンポーネントを提供する JavaScript ベースのフロントエンド フレームワークです。このうち、ポップアップ レイヤー (モーダル) とモーダル ボックス (ポップオーバー) は一般的な UI コンポーネントであり、Vue でも簡単に実装できます。この記事では、Vueでポップアップレイヤーとモーダルボックスを実装する方法を紹介します。

1. ポップアップ レイヤー

ポップアップ レイヤーは通常、メッセージの表示、メニューまたは操作パネルの表示に使用され、通常はページ全体または領域の一部をカバーする必要があります。 Vue でポップアップ レイヤーを実装するには、動的コンポーネントとスロットを使用する必要があります。

1. ポップアップ レイヤー コンポーネントの作成

まず、ポップアップ レイヤー コンポーネントを作成する必要があります。ここでは、Modal という名前のポップアップ レイヤー コンポーネントを作成し、表示する必要があるコンテンツを動的にロードするためのスロットを含めます。

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}
</style>

上記のコードでは、まず Modal という名前のコンポーネントを定義し、ポップアップ レイヤーを表示するかどうかを制御するために使用される show という名前の props を渡します。コンポーネント テンプレートでは、動的スロットを使用して、ポップアップ レイヤーに表示する必要があるコンテンツを表示します。次に、ポップアップ レイヤーを中央に配置するようにいくつかのスタイルを設定し、半透明の背景色を追加しました。

2. ポップアップ レイヤーを表示する必要があるコンポーネントで Modal コンポーネントを使用します

次に、表示する必要があるコンポーネントで Modal コンポーネントを使用する必要があります。ポップアップレイヤー。ここでは、App というルート コンポーネントを作成し、そのコンポーネントにポップアップ レイヤーの表示をトリガーするボタンを追加します。

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示弹出层</button>
    <modal v-bind:show="showModal">
      <p>这是弹出层中的内容</p>
    </modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

上記のコードでは、最初に以前に定義したモーダル コンポーネントをインポートし、ポップアップ レイヤーの表示をトリガーするボタンをコンポーネント テンプレートに追加しました。次に、v-bind ディレクティブを使用して、showModal 属性を Modal コンポーネントの show 属性にバインドします。最後に、ポップアップ レイヤーに表示する必要があるコンテンツをモーダル コンポーネントのスロットに配置します。

2. モーダル ボックス

モーダル ボックスは通常、ユーザーに確認または選択を促すために使用され、操作を実行する前にユーザーが他の操作を実行できないようにします。ポップアップ レイヤーと同様に、Vue でモーダル ボックスを実装するには、動的コンポーネントとスロットも必要です。

1. モーダル ボックス コンポーネントの作成

まず、モーダル ボックス コンポーネントを作成する必要があります。ここでは、confirmation という名前のモーダル コンポーネントを作成します。これには 2 つのスロットが含まれています。1 つはプロンプト情報を表示するためのもので、もう 1 つは確認ボタンとキャンセル ボタンを表示するためのものです。

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirmation',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onCancel: Function,
    onConfirm: Function
  },
  methods: {
    cancel() {
      this.onCancel && this.onCancel()
    },
    confirm() {
      this.onConfirm && this.onConfirm()
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer button {
  margin-left: 10px;
}
</style>

上記のコードでは、confirm という名前のモーダル ボックス コンポーネントを作成し、モーダル ボックスを表示するかどうかを制御するためにそれぞれ使用される show、onCancel、onconfirm という名前のプロパティを渡しました。そして動作確認。コンポーネント テンプレートでは、2 つのスロットを使用します。1 つはプロンプト情報の表示用、もう 1 つは確認ボタンとキャンセル ボタンの表示用です。このメソッドでは、キャンセル操作と確認操作を処理するために cancel メソッドとconfirm メソッドを定義し、これらのメソッドで親コンポーネントによって渡されるコールバック関数をトリガーします。

2. モーダル ボックスを表示する必要があるコンポーネントで確認コンポーネントを使用します

次に、モーダル ボックスを表示する必要があるコンポーネントで確認コンポーネントを使用する必要があります。箱。ここでは、App という名前のルート コンポーネントを作成し、そのコンポーネントにボタンを追加して、確認コンポーネントをトリガーしてモーダル ボックスを表示します。

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示模态框</button>
    <confirmation
      v-bind:show="showModal"
      v-bind:onCancel="cancel"
      v-bind:onConfirm="confirm"
    >
      <template v-slot:body>
        <p>确定要删除吗？</p>
      </template>
    </confirmation>
  </div>
</template>

<script>
import Confirmation from './components/Confirmation.vue'

export default {
  name: 'App',
  components: {
    Confirmation
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    cancel() {
      this.showModal = false
    },
    confirm() {
      alert('删除成功！')
      this.showModal = false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

上記のコードでは、確認コンポーネントをモーダル ボックス コンポーネントとして使用し、showModal 属性、キャンセル メソッド、および確認メソッドを確認コンポーネントのプロパティにバインドします。確認コンポーネントのスロットには、表示するプロンプト情報を表示します。 Vue テンプレートでは、v-slot ディレクティブを使用して、確認コンポーネントで使用されるスロットとスロット (本体) の名前を定義します。親コンポーネントでは、キャンセルおよび確認操作を処理する cancel メソッドとconfirm メソッドを定義し、確認操作中に削除が成功したことをユーザーに通知します。

概要

Vue でポップアップ レイヤーとモーダル ボックスを実装するには、動的コンポーネントとスロットを使用する必要があります。コンポーネントをポップアップ レイヤーまたはモーダル ボックスとして使用することで、これらの一般的な UI コンポーネントを簡単に実装できます。同時に、コールバック関数を子コンポーネントに渡すことで、子コンポーネントでユーザーの操作を簡単に処理し、結果を親コンポーネントにフィードバックすることができます。

以上がVue でポップアップ レイヤーとモーダル ボックスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。