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

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

王林

リリース： 2023-06-25 09:25:39

オリジナル

1370 人が閲覧しました

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

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

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

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

まず、ポップアップレイヤーコンポーネントを作成する必要があります。ここでは、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 を渡します。コンポーネントテンプレートでは、動的スロットを使用して、ポップアップレイヤーに表示する必要があるコンテンツを表示します。次に、ポップアップレイヤーを中央に配置するようにいくつかのスタイルを設定し、半透明の背景色を追加しました。

ポップアップレイヤーを表示する必要があるコンポーネントで 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 でモーダルボックスを実装するには、動的コンポーネントとスロットも必要です。

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

まず、モーダルボックスコンポーネントを作成する必要があります。ここでは、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 メソッドを定義し、これらのメソッドで親コンポーネントによって渡されるコールバック関数をトリガーします。

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

次に、モーダルボックスを表示する必要があるコンポーネントで確認コンポーネントを使用する必要があります。箱。ここでは、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 サイトの他の関連記事を参照してください。