? ? ????工作閑暇之余想著自己學習點新知識，于是又開始鼓搗起新的小項目。之前使用elementUI時一個alert彈窗直接使用this.$alert就能解決，這次自己從頭開始，也想著做一套自己的小組件，所以首先就從全局的alert彈窗開始吧。

? ? ? ? this.$alert使用起來很簡單是因為$alert綁定在vue.prototype上，所以全局都可以直接使用。我也準備仿照這個用法，通過函數指令傳入參數，動態創建alert彈窗。

? ? ? ? 首先，我們得有一個彈窗組件，所以在components文件夾下新建一個alertPop的文件夾，然后創建一個alertPop.vue文件。之后就像一般組件一樣編寫，通過Props接收傳入的參數。這里我嘗試傳入彈窗頭部標題以及提示信息。然后組件編寫完成我們可以先在局部引用進行測試以及樣式調整。

alertPop.vue中的props

? ? ? ? 測試完成后，我們可以進行組件的掛載和創建了。這里主要使用了Vue.extend(options) + $mount的方法，官網地址如下Vue-extend。根據官方定義可知，Vue.extend是一個全局API，使用基礎構造器，創建一個“子類”。傳入的參數是一個對象，里面包含組件的信息。其實到這里我也不是很明白，但是我看到用法之后就可以理解一些了。

alert.js文件

? ? ? ? 首先我們在alertPop文件夾下再創建一個alert.js的文件，然后在文件中引入alertPop.vue以及Vue。使用Vue.extend(alertPop)創建一個Alert類。之后定義alert方法，傳入的參數即Props對應的數據。在這個方法中，我們可以new一個Alert的實例，這個實例其實就是彈窗對象。但此時因為組件還未掛載所以還沒有$el。從此時在控制臺打印的組件的生命周期也可以看出，組件只執行了beforeCreate和created鉤子，并未進入掛載。我們手動執行$mount()之后，組件成功掛載，取到組件的$el，利用document.body.apendChild()方法可以將彈窗添加到頁面。

? ? ? ? 在new Alert()的時候可以傳入參數propsData，就是對應傳入組件中的props。那彈窗消失如何實現？當然我們可以在點擊確定按鈕的時候綁定方法，之后在通過彈窗對象將方法重寫，此時點擊確定按鈕，就會調用removeChild()將彈窗移除，$destroy()方法銷毀彈窗實例（注意改寫方法要在掛載之前，否則改寫不生效）。在彈窗消失時我們也可以給他添加一個回調函數，以便后續操作。

? ? ? ? 此時我們已經可以通過調用alert函數進行彈窗操作，但我們想要全局使用它還需要一個步驟。在根文件夾下新建plugins文件夾，創建plugin.js文件。在文件中引入我們剛剛寫好的函數，并定義一個注冊函數，在函數中將alert方法賦值給Vue.prototype.$alert，之后在main.js引入Plugin.js，使用Vue.use(Plugin)即可完成注冊。

plugin.js文件

main.js文件

? ? ? ? 之后我們就可以在組件中使用this.$uAert()調用我們的彈窗，效果如下：

調用this.$uAlert()

彈窗.jpg

? ? ?