Vueドキュメントでのポップアップウィンドウコンポーネントの実装方法

Vue は、動的 Web アプリケーションを実装できる最も人気のある JavaScript フレームワークの 1 つです。 Vue では、ポップアップ ウィンドウは一般的に使用されるコンポーネントの 1 つであり、警告、成功プロンプト、エラー メッセージなどを表示するために使用できます。 Vue にはポップアップ コンポーネントを実装するためのメソッドがいくつか用意されており、この記事ではそのうちのいくつかを紹介します。

方法 1: Vue.js の組み込みコンポーネントを使用する

Vue.js には、ポップアップ効果を実現するために使用されるコンポーネント、モーダル ボックス (Modal) が付属しています。 。モーダル ボックスの実装には、Vue.js および CSS スタイルのいくつかの命令を使用する必要があります。

最初にコンポーネントを Vue コンポーネントに導入する必要があります:

<template>
  <div>
    <!-- ... -->
    <modal v-if="showModal" @close="showModal = false">
      <!-- 弹窗内容 -->
    </modal>
    <!-- ... -->
  </div>
</template>

<script>
import Modal from 'vue-js-modal'

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

テンプレートでは、ポップアップされるコンポーネントを <modal> タグで囲みます。 ,@closemodal コンポーネント終了イベントをリッスンし、showModal 変数を false に設定します。このとき、空白部分をクリックするか、esc キーを押して modal コンポーネントを閉じます。

次に、モーダル ボックスの構成情報を <script> に追加する必要があります:

Modal.config.defaultDialogConfirmText = '确定'
Modal.config.defaultDialogCancelText = '取消'
Modal.config.defaultDialogPromptTitle = '提示'
Modal.config.defaultDialogPromptPlaceholder = ''
Modal.config.defaultSnackbarDuration = 2000
Modal.config.defaultSpinnerType = 'circle'

上記の構成は、必要に応じてカスタマイズできます。モーダルボックスの表示と非表示。

方法 2: VueX を使用してポップアップ コンポーネントを管理する

VueX は Vue.js の状態マネージャーであり、データのステータスをグローバルに管理できます。 VueX を使用すると、ポップアップ コンポーネントも管理できます。

Vuex でグローバル状態を定義して、ポップアップ ウィンドウの表示と非表示を制御します。

const state = {
  dialog: {
    visible: false,
    message: '',
    confirmLabel: '确定',
    cancelLabel: '取消',
    resolve: null,
    reject: null
  }
}

dialog には、ポップアップ ウィンドウ コンポーネントに関する情報が含まれています。ポップアップ ウィンドウが表示されるかどうか、ポップアップ ウィンドウのメッセージ、OK ラベルとキャンセル ラベルなどが含まれます。ポップアップ ウィンドウを表示する必要がある場合、ミューテーションによって状態のデータ ステータスを変更できます。

const mutations = {
  showDialog(state, payload) {
    state.dialog = {
      visible: true,
      message: payload.message,
      confirmLabel: payload.confirmLabel || '确定',
      cancelLabel: payload.cancelLabel || '取消',
      resolve: payload.resolve,
      reject: payload.reject
    }
  },
  hideDialog(state, payload) {
    state.dialog.visible = false
    if (payload.resolve) {
      payload.resolve()
    }
  }
}

上記のコードでは、showDialog を実行するときに、ポップ ウィンドウを制御します。渡されたパラメータの表示とスタイルを介してウィンドウを開きます。 hideDialog を実行するときは、ポップアップ ウィンドウを閉じ、渡されたパラメーターに基づいてコールバック関数を実行します。

方法 3: ポップアップ ウィンドウ コンポーネントを個別に実装する

上記の 2 つの方法に加えて、ポップアップ ウィンドウ コンポーネントを個別に実装することもできます。まず、Vue コンポーネントでポップアップ コンポーネント テンプレートを定義する必要があります。

<template>
  <div class="popup" v-show="visible"> 
    <div class="mask"></div> 
    <div class="dialog"> 
      <slot name="header"></slot>
      <div class="content"> 
        <slot></slot>
      </div> 
      <div class="footer" v-show="showFooter"> 
        <button class="btn btn-primary" @click="ok" v-text="okText || '确定'"></button>
        <button class="btn btn-default" @click="cancel" v-text="cancelText || '取消'"></button>
      </div> 
    </div> 
  </div>
</template>

上記のコードでは、<slot></slot> と を使用します。 <slot name="header"></slot> を使用してポップアップ ウィンドウのコンテンツとタイトルを渡します。また、必要に応じてポップアップ ウィンドウ ボタンを追加することもできます。

次に、<script> でポップアップ コンポーネントのプロパティとメソッドをいくつか定義する必要があります:

<template>
  <div class="popup" v-show="visible"> 
    <div class="mask"></div> 
    <div class="dialog"> 
      <slot name="header"></slot> 
      <div class="content"> 
        <slot></slot> 
      </div> 
      <div class="footer" v-show="showFooter"> 
        <button class="btn btn-primary" @click="ok" v-text="okText || '确定'"></button>
        <button class="btn btn-default" @click="cancel" v-text="cancelText || '取消'"></button>
      </div> 
    </div> 
  </div>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    visible: Boolean, //控制弹窗是否可见
    okText: String, //确定按钮文本
    cancelText: String, //取消按钮文本
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    ok() {
      this.$emit('ok')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

v-bind を使用できます。 と v-on を使用してコンポーネントのプロパティとメソッドを設定し、ポップアップ ウィンドウを使用する必要があるコンポーネントにコンポーネントを導入し、次の引数を渡してポップアップ ウィンドウ コンポーネントを呼び出します。異なるパラメータ。

概要:

Vue.js では、ポップアップ コンポーネントを実装する方法がたくさんあります。 Vue.js に付属のモーダル ボックス コンポーネントを使用して、ポップアップ ウィンドウをすばやく実装できます。VueX を使用して、ポップアップ ウィンドウ コンポーネントのステータスをグローバルに制御できます。ポップアップ ウィンドウ コンポーネントを個別に実装することで、カスタマイズできます必要に応じて、ポップアップ ウィンドウ コンポーネントのスタイルと機能を変更します。実際のニーズに応じて適切な開発手法を選択する必要があります。

以上がVueドキュメントでのポップアップウィンドウコンポーネントの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。