Vue.js如何發展彈出模態框元件的方法介紹

本篇文章主要介紹了Vue.js彈出模態框元件開發的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前言

在開發專案的過程中，常常會需要開發一些彈出框效果，但原生的alert而confirm往往都無法滿足專案的要求。這次在開發基於Vue.js的讀書WebApp的時候總共有兩處需要進行提示的地方，因為一開始就沒有引入其他的組件庫，現在只好自己寫一個模態框組件了。目前只是一個只滿足當前專案需求的初始版本，因為這個專案比較簡單，也就沒有保留很多的擴充功能。這個元件還是有很多擴充空間的，可以增加更多的自訂內容和樣式。這裡只介紹如何去開發一個模態框組件，有需要進行更多擴充的，可以依照自己的需求自行開發。

元件範本

<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对象,给父级组件调用
  }
 }

}

在模態方塊元件中定義了三個方法，核心的方法是confirm ，此方法是提供給父級元件呼叫的，並傳回一個promise物件。使用promise物件主要是為了非同步調用，因為很多時候我們使用模態框時需要根據返回結果再進行下一步處理。

擴展提示：

如果需要擴展的話，可以透過props的dialogOption傳遞更多的字段，在computed中進行判斷，例如增加一個字段isShowCancelButton可以控制取消按鈕是否顯示。其他擴展同理。

呼叫

<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();
})

源碼位址

Dialog元件原始碼

實現效果

#

以上是Vue.js如何發展彈出模態框元件的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！