Vue.js彈出模態(tài)框組件開發(fā)的示例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:33:58

Vue.js彈出模態(tài)框組件開發(fā)的示例代碼

Vue.js彈出模態(tài)框組件開發(fā)的示例代碼:前言在開發(fā)項(xiàng)目的過程中，經(jīng)常會(huì)需要開發(fā)一些彈出框效果，但原生的alert和confirm往往都無法滿足項(xiàng)目的要求。這次在開發(fā)基于Vue.js的讀書WebApp的時(shí)候總共有兩處需要進(jìn)行提示的地方，因?yàn)橐婚_始就沒有引入其他的組件庫，現(xiàn)在只好自己寫一個(gè)模態(tài)框組件了。目

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue.js彈出模態(tài)框組件開發(fā)的示例代碼:前言在開發(fā)項(xiàng)目的過程中，經(jīng)常會(huì)需要開發(fā)一些彈出框效果，但原生的alert和confirm往往都無法滿足項(xiàng)目的要求。這次在開發(fā)基于Vue.js的讀書WebApp的時(shí)候總共有兩處需要進(jìn)行提示的地方，因?yàn)橐婚_始就沒有引入其他的組件庫，現(xiàn)在只好自己寫一個(gè)模態(tài)框組件了。目

前言

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

組件模板

<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>

模態(tài)框結(jié)構(gòu)分為：頭部標(biāo)題、提示內(nèi)容和操作區(qū)域。同時(shí)一般還會(huì)有一個(gè)遮罩層。此次需求比較簡單，也無需圖標(biāo)等內(nèi)容，所以結(jié)構(gòu)上寫的也比較簡單。實(shí)際開發(fā)中可根據(jù)需求對(duì)結(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對(duì)象
 }
 },
 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對(duì)象，給父組件調(diào)用
 confirm() {
 this.promise = new Promise((resolve, reject) => {
 this.resolve = resolve;
 this.reject = reject;
 });
 return this.promise; //返回promise對(duì)象,給父級(jí)組件調(diào)用
 }
 }

}

在模態(tài)框組件中定義了三個(gè)方法，核心的方法是confirm，此方法是提供給父級(jí)組件調(diào)用的，返回一個(gè)promise對(duì)象。使用promise對(duì)象主要是為了異步調(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)用

<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組件源碼

實(shí)現(xiàn)效果