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

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

黄舟

リリース： 2017-07-26 16:10:39

オリジナル

3331 人が閲覧しました

この記事では主に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: &#39;dialog&#39;,
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: &#39;&#39;,
   reject: &#39;&#39;,
   promise: &#39;&#39;, // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || &#39;提示&#39;,
    text: options.text,
    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : &#39;取消&#39;,
    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : &#39;确定&#39;,
   }
  }
 },
 methods: {
  //确定,将promise断定为完成态
  submit() {
   this.resolve(&#39;submit&#39;);
  },
  // 取消,将promise断定为reject状态
  cancel() {
   this.reject(&#39;cancel&#39;);
  },
  //显示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();
})

ログイン後にコピー

ソースコードアドレス

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

効果を実現する