怎么在Vue.js中實(shí)現(xiàn)一個(gè)彈出模態(tài)框組件？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的圍場網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

組件模板

模態(tài)框結(jié)構(gòu)分為：頭部標(biāo)題、提示內(nèi)容和操作區(qū)域。同時(shí)一般還會有一個(gè)遮罩層。此次需求比較簡單，也無需圖標(biāo)等內(nèi)容，所以結(jié)構(gòu)上寫的也比較簡單。實(shí)際開發(fā)中可根據(jù)需求對結(jié)構(gòu)進(jìn)行相應(yīng)的調(diào)整。

組件樣式

.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斷定為完成態(tài)
  submit() {
   this.resolve('submit');
  },
  // 取消,將promise斷定為reject狀態(tài)
  cancel() {
   this.reject('cancel');
  },
  //顯示confirm彈出,并創(chuàng)建promise對象，給父組件調(diào)用
  confirm() {
   this.promise = new Promise((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
   });
   return this.promise; //返回promise對象,給父級組件調(diào)用
  }
 }

}

在模態(tài)框組件中定義了三個(gè)方法，核心的方法是confirm，此方法是提供給父級組件調(diào)用的，返回一個(gè)promise對象。使用promise對象主要是為了異步調(diào)用，因?yàn)楹芏鄷r(shí)候我們使用模態(tài)框時(shí)需要根據(jù)返回結(jié)果再進(jìn)行下一步處理。

擴(kuò)展提示：

如果需要擴(kuò)展的話，可以通過props的dialogOption傳遞更多的字段，在computed中進(jìn)行判斷，比如增加一個(gè)字段isShowCancelButton可以控制取消按鈕是否顯示。其他擴(kuò)展同理。

調(diào)用

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。