小編給大家分享一下怎么用vue編寫彈出框組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為瓊山企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)，瓊山網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

設(shè)計(jì)組件的思考

其實(shí)單純的編寫一個(gè)彈出框組件并不難，寫一個(gè)模板，然后用v-if或者v-show指令還控制組件的出現(xiàn)與消失。真正困擾我的是，這個(gè)組件的調(diào)用方式，這個(gè)問題糾結(jié)了我好久。

調(diào)研了下資料，有些人建議，直接把組件標(biāo)簽插進(jìn)模板中，然后通過直接控制組件的顯示隱藏來控制組件。這樣寫有好處，就是結(jié)構(gòu)清晰，一目了然，人家一看你的代碼就知道你這個(gè)頁面可能會(huì)有彈出框，并且編寫的組件就更容易，只需關(guān)注內(nèi)部方法就好了，也不存在事件調(diào)用的困擾，維護(hù)起來也特別容易。但是缺點(diǎn)也很明顯，如果有多個(gè)彈窗，并且不知道會(huì)有幾個(gè)彈窗的情況下，感覺就不太好做，并且這種提前寫模板的形式，難免會(huì)在不彈窗的時(shí)候要下載一些js文件，有可能會(huì)造成性能浪費(fèi)。

也有些人建議，在寫好的彈出框組件之外再做一層封裝，通過動(dòng)態(tài)調(diào)用的方式來控制彈出框的顯示與隱藏。這樣寫的好處是不用事先在模板里面寫好該組件的標(biāo)簽，只需要在想調(diào)用的地方調(diào)用下該組件，就實(shí)現(xiàn)了按需使用的目的，符合之前傳統(tǒng)前端框架的編碼習(xí)慣。缺點(diǎn)就是感覺代碼寫起來比較復(fù)雜，層層嵌套，并且感覺這個(gè)與MVVM模式的狀態(tài)驅(qū)動(dòng)界面的思想相違背。

于是我天秤座的糾結(jié)病犯了，在選擇哪種技術(shù)方案的問題上，思考了很久。但是網(wǎng)上搜了很多，發(fā)現(xiàn)還是后一種實(shí)現(xiàn)方法用的人比較多。后來我又研究了了elementUI和iView的彈出框組件，他們也是沿用的后一種方法，想了一下后一種方法雖然代碼易讀性不強(qiáng)，但是它真正模擬了瀏覽器默認(rèn)的alert事件，在用戶需要的地方來調(diào)用，一方面節(jié)省了代碼量，另一方面也很容易解決多個(gè)彈窗的情況。最后還是決定用這種模式寫一個(gè)簡(jiǎn)單的彈出框組件。主要是體會(huì)這其中的機(jī)理。廢話不多說，來上干貨了。有啥不對(duì)的地方還請(qǐng)大家多多指教。(ps:對(duì)于天秤座的我，雖然選擇了后一種方法，但是內(nèi)心還是鐘愛第一種方法，并且后一種方法并沒有足夠的理由說服我呀，不知道哪位有識(shí)之士能夠幫忙點(diǎn)醒一下我，晚輩感激不盡)。

alert組件設(shè)計(jì)

單獨(dú)的設(shè)計(jì)alert彈出框的邏輯是很簡(jiǎn)單的，我就直接上代碼了：

.alert {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0, 0.8);
 z-index: 1000;
 transition: all .3s ease-in-out;
}
.wrap {
 position: absolute;
 z-index: 1002;
 min-width: 400px;
 background: #fff;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 border-radius: 4px;
}
.head {
 height: 40px;
 line-height: 40px;
 border-bottom: 1px solid #dedede;
 padding-left: 10px;
 color: #333;
}
.body {
 padding: 40px 20px;
 text-align: center;
}
.foot {
 height: 50px;
 text-align: center;
 button {
  margin-right: 20px;
  &:last-child {
   margin-right: 0;
  }
 }
}

這里只是寫了簡(jiǎn)單的功能，并沒有考慮更復(fù)雜的情況，比如按鈕顏色定制，大小定制，z-index層級(jí)的考慮，遮罩層的統(tǒng)一管理等等，只是為了掌握編寫彈出框的主要思想，所以沒有寫太多的情況。這里只細(xì)分了是確認(rèn)框還是通知框，可以定制彈出框的內(nèi)容、標(biāo)題等一些簡(jiǎn)單的常規(guī)操作。

其實(shí)這個(gè)組件寫好，就可以在頁面用起來了，直接在對(duì)應(yīng)頁面插入這段，可以也可以用：

點(diǎn)我
我是一個(gè)確認(rèn)框

...
methods: {
  showAlert() {
    this.$refs.alert.show();
  }
}
...

當(dāng)然，如果真要這么用，這個(gè)組件還是需要修改一些東西的，比如事件拋出，當(dāng)點(diǎn)擊確定或者取消按鈕的時(shí)候，需要emit對(duì)應(yīng)的事件，以提供給父組件捕獲，并做相應(yīng)的處理。

動(dòng)態(tài)插入到頁面中

為了能讓組件動(dòng)態(tài)的插入到頁面中，需要對(duì)上面的組件進(jìn)行封裝，利用Vue.extend機(jī)制，可以輕松的做到這種封裝，直接上代碼：

import Vue from 'vue';
import alert from './alert';
const AlertConstructor = Vue.extend(alert);
const div = document.createElement('div');
AlertConstructor.show = (options) => {
 document.body.appendChild(div);
 options.type = 'inform';
 const propsData = Object.assign({}, options);
 const alertInstance = new AlertConstructor({
  propsData,
 }).$mount(div);
 alertInstance.show();
};
AlertConstructor.confirm = (options) => {
 document.body.appendChild(div);
 options.type = 'confirm';
 const propsData = Object.assign({}, options);
 const alertInstance = new AlertConstructor({
  propsData,
 }).$mount(div);
 alertInstance.show();
};
export default AlertConstructor;

這里，show對(duì)應(yīng)的是通知框，confirm對(duì)應(yīng)的是確認(rèn)框。我知道這種封裝有點(diǎn)簡(jiǎn)單了，有很多情況沒有考慮，比如有多個(gè)彈出框時(shí)的處理等。這里只是做了簡(jiǎn)單的封裝，為的就是讓大家明白此種封裝主要思路是什么。

以上是“怎么用vue編寫彈出框組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！