? ? ????工作閑暇之余想著自己學(xué)習(xí)點(diǎn)新知識(shí)首尼，于是又開(kāi)始鼓搗起新的小項(xiàng)目彤钟。之前使用elementUI時(shí)一個(gè)alert彈窗直接使用this.$alert就能解決胳搞，這次自己從頭開(kāi)始会前，也想著做一套自己的小組件拨黔，所以首先就從全局的alert彈窗開(kāi)始吧蛔溃。
? ? ? ? this.$alert使用起來(lái)很簡(jiǎn)單是因?yàn)?alert綁定在vue.prototype上，所以全局都可以直接使用篱蝇。我也準(zhǔn)備仿照這個(gè)用法贺待，通過(guò)函數(shù)指令傳入?yún)?shù)，動(dòng)態(tài)創(chuàng)建alert彈窗零截。
? ? ? ? 首先麸塞，我們得有一個(gè)彈窗組件，所以在components文件夾下新建一個(gè)alertPop的文件夾涧衙，然后創(chuàng)建一個(gè)alertPop.vue文件哪工。之后就像一般組件一樣編寫(xiě)，通過(guò)Props接收傳入的參數(shù)绍撞。這里我嘗試傳入彈窗頭部標(biāo)題以及提示信息正勒。然后組件編寫(xiě)完成我們可以先在局部引用進(jìn)行測(cè)試以及樣式調(diào)整。
? ? ? ? 測(cè)試完成后傻铣，我們可以進(jìn)行組件的掛載和創(chuàng)建了章贞。這里主要使用了Vue.extend(options) + $mount的方法，官網(wǎng)地址如下Vue-extend。根據(jù)官方定義可知鸭限，Vue.extend是一個(gè)全局API蜕径，使用基礎(chǔ)構(gòu)造器，創(chuàng)建一個(gè)“子類”败京。傳入的參數(shù)是一個(gè)對(duì)象兜喻，里面包含組件的信息。其實(shí)到這里我也不是很明白赡麦，但是我看到用法之后就可以理解一些了朴皆。
? ? ? ? 首先我們?cè)赼lertPop文件夾下再創(chuàng)建一個(gè)alert.js的文件，然后在文件中引入alertPop.vue以及Vue泛粹。使用Vue.extend(alertPop)創(chuàng)建一個(gè)Alert類遂铡。之后定義alert方法，傳入的參數(shù)即Props對(duì)應(yīng)的數(shù)據(jù)晶姊。在這個(gè)方法中扒接，我們可以new一個(gè)Alert的實(shí)例，這個(gè)實(shí)例其實(shí)就是彈窗對(duì)象们衙。但此時(shí)因?yàn)榻M件還未掛載所以還沒(méi)有$el钾怔。從此時(shí)在控制臺(tái)打印的組件的生命周期也可以看出，組件只執(zhí)行了beforeCreate和created鉤子蒙挑，并未進(jìn)入掛載宗侦。我們手動(dòng)執(zhí)行$mount()之后，組件成功掛載脆荷，取到組件的$el凝垛，利用document.body.apendChild()方法可以將彈窗添加到頁(yè)面。
? ? ? ? 在new Alert()的時(shí)候可以傳入?yún)?shù)propsData蜓谋，就是對(duì)應(yīng)傳入組件中的props梦皮。那彈窗消失如何實(shí)現(xiàn)？當(dāng)然我們可以在點(diǎn)擊確定按鈕的時(shí)候綁定方法桃焕，之后在通過(guò)彈窗對(duì)象將方法重寫(xiě)剑肯，此時(shí)點(diǎn)擊確定按鈕，就會(huì)調(diào)用removeChild()將彈窗移除观堂，$destroy()方法銷毀彈窗實(shí)例（注意改寫(xiě)方法要在掛載之前让网，否則改寫(xiě)不生效）。在彈窗消失時(shí)我們也可以給他添加一個(gè)回調(diào)函數(shù)师痕，以便后續(xù)操作溃睹。
? ? ? ? 此時(shí)我們已經(jīng)可以通過(guò)調(diào)用alert函數(shù)進(jìn)行彈窗操作，但我們想要全局使用它還需要一個(gè)步驟胰坟。在根文件夾下新建plugins文件夾因篇，創(chuàng)建plugin.js文件。在文件中引入我們剛剛寫(xiě)好的函數(shù)，并定義一個(gè)注冊(cè)函數(shù)竞滓，在函數(shù)中將alert方法賦值給Vue.prototype.$alert咐吼，之后在main.js引入Plugin.js，使用Vue.use(Plugin)即可完成注冊(cè)商佑。
? ? ? ? 之后我們就可以在組件中使用this.$uAert()調(diào)用我們的彈窗锯茄，效果如下：
? ? ?
