Vue.js彈出模態框組件開發的示例代碼

2019-11-19 15:58:53

字體：大中小

來源：轉載

供稿：網友

前言

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

組件模板

<template><div class="dialog"> <div class="mask"></div> <div class="dialog-content">  <h3 class="title">{{ modal.title }}</h3>  <p class="text">{{ modal.text }}</p>  <div class="btn-group">   <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>   <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>  </div> </div></div></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組件源碼

實現效果