Vue.js でポップアップ モーダル ボックス コンポーネントを開発する方法の紹介

この記事では主にVue.jsのポップアップモーダルボックスコンポーネントの開発サンプルコードを紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。エディターをフォローして一緒に見てみましょう

前書き

プロジェクトの開発過程では、いくつかのポップアップボックス効果を開発する必要があることがよくありますが、ネイティブのアラートと確認ではプロジェクトの要件を満たせないことがよくあります。 。今回、Vue.js に基づいて読み取り WebApp を開発する場合、最初に他のコンポーネント ライブラリを導入していなかったので、プロンプトが必要な場所が合計 2 つあり、モーダル ボックス コンポーネントを自分で記述する必要があります。現時点では、現在のプロジェクトのニーズを満たすだけの初期バージョンにすぎません。このプロジェクトは比較的単純であるため、多くの拡張機能は保持されていません。このコンポーネントにはまだ拡張の余地が多く、さらに多くのカスタム コンテンツやスタイルを追加できます。ここではモーダル ボックス コンポーネントの開発方法のみを紹介します。さらに拡張が必要な​​場合は、必要に応じて自分で開発できます。

コンポーネントテンプレート

<template>
<p class="dialog">
 <p class="mask"></p>
 <p class="dialog-content">
  <h3 class="title">{{ modal.title }}</h3>
  <p class="text">{{ modal.text }}</p>
  <p class="btn-group">
   <p class="btn" @click="cancel">{{ modal.cancelButtonText }}</p>
   <p class="btn" @click="submit">{{ modal.confirmButtonText }}</p>
  </p>
 </p>
</p>
</template>

モーダルボックスの構造は、ヘッダータイトル、プロンプトコンテンツ、操作領域に分かれています。同時に、通常はマスク層が存在します。今回の要件は比較的シンプルで、アイコンなどのコンテンツも必要ないため、比較的シンプルな構造となっています。実際の開発では、必要に応じて構造を調整できます。

コンポーネントスタイル

.dialog {
 position: relative;

 .dialog-content {
  position: fixed;
  box-sizing: border-box;
  padding: 20px;
  width: 80%;
  min-height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
  z-index: 50002;
  .title {
   font-size: 16px;
   font-weight: 600;
   line-height: 30px;
  }
  .text {
   font-size: 14px;
   line-height: 30px;
   color: #555;
  }
  .btn-group {
   display: flex;
   position: absolute;
   right: 0;
   bottom: 10px;
   .btn {
    padding: 10px 20px;
    font-size: 14px;
    &:last-child {
     color: #76D49B;
    }
   }
  }
 }
 .mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50001;
  background: rgba(0,0,0,.5);
 }
}

スタイルは比較的シンプルなので、詳細は説明しません。

コンポーネントインターフェイス

export default {
 name: 'dialog',
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: '',
   reject: '',
   promise: '', // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || '提示',
    text: options.text,
    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
   }
  }
 },
 methods: {
  //确定,将promise断定为完成态
  submit() {
   this.resolve('submit');
  },
  // 取消,将promise断定为reject状态
  cancel() {
   this.reject('cancel');
  },
  //显示confirm弹出,并创建promise对象，给父组件调用
  confirm() {
   this.promise = new Promise((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
   });
   return this.promise; //返回promise对象,给父级组件调用
  }
 }

}

は、モーダルボックスコンポーネントに3つのメソッドを定義します。このメソッドは、親コンポーネントに提供され、promiseオブジェクトを呼び出します。 Promise オブジェクトを使用する主な目的は、非同期呼び出しです。これは、モーダル ボックスを使用する場合、多くの場合、返された結果に基づいて次のステップに進む必要があるためです。

拡張のヒント:

拡張する必要がある場合は、propsのdialogOptionを介してさらに多くのフィールドを渡し、計算結果でそれを判断できます。たとえば、フィールドisShowCancelButtonを追加すると、キャンセルボタンを表示するかどうかを制御できます。他の拡張機能についても同様です。

Call

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
 this.showDialog = false;
 next();
}).catch(() => {
 this.showDialog = false;
 next();
})

ソースコードアドレス

ダイアログコンポーネントのソースコード

効果を実現する

以上がVue.js でポップアップ モーダル ボックス コンポーネントを開発する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。