? ? ????工作閑暇之余想著自己學習點新知識,于是又開始鼓搗起新的小項目。之前使用elementUI時一個alert彈窗直接使用this.$alert就能解決,這次自己從頭開始,也想著做一套自己的小組件,所以首先就從全局的alert彈窗開始吧。
? ? ? ? this.$alert使用起來很簡單是因為$alert綁定在vue.prototype上,所以全局都可以直接使用。我也準備仿照這個用法,通過函數指令傳入參數,動態創建alert彈窗。
? ? ? ? 首先,我們得有一個彈窗組件,所以在components文件夾下新建一個alertPop的文件夾,然后創建一個alertPop.vue文件。之后就像一般組件一樣編寫,通過Props接收傳入的參數。這里我嘗試傳入彈窗頭部標題以及提示信息。然后組件編寫完成我們可以先在局部引用進行測試以及樣式調整。
? ? ? ? 測試完成后,我們可以進行組件的掛載和創建了。這里主要使用了Vue.extend(options) + $mount的方法,官網地址如下Vue-extend。根據官方定義可知,Vue.extend是一個全局API,使用基礎構造器,創建一個“子類”。傳入的參數是一個對象,里面包含組件的信息。其實到這里我也不是很明白,但是我看到用法之后就可以理解一些了。
? ? ? ? 首先我們在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)即可完成注冊。
? ? ? ? 之后我們就可以在組件中使用this.$uAert()調用我們的彈窗,效果如下:
? ? ?