自己寫一個vue的loading外掛

猛虎嗅薔薇發表於2019-04-09
Vue

算是一篇入門總結，藉助一個loading的例子，來梳理一下vue的外掛

相關API

Vue.use(plugin)安裝一個vue外掛

Vue.extend(options)建立一個子類構造器

不熟悉這兩個外掛的可以在官網瞭解一下，看看一些主要的引數，然後在例子中知道我們要幹嘛

step1.思路、知道要做啥

不管是loading外掛，還是toast,或者別的根據業務來開發的外掛，基本上跑不掉UI，我們首先要知道需要做出什麼樣的效果，然後確定一個思路入手。

1.寫一個最終效果，建立對應的資料夾開發和管理外掛

2.整理所需要的API

3.確定需要的引數方法，例如loading時候的標題、控制消失的方法

4.豐富引數來定製化、比如loading的背景色、icon、字型顏色等

簡單的確定思路之後，就可以著手開發了

step2. 建立外掛模組，全域性引入

一般都是plugins資料夾下面會有index.js檔案來管理自己開發的外掛，然後在main.js引入

import '../plugins'

注意官方文件的一句話該方法【Vue.use()】需要在呼叫 new Vue() 之前被呼叫,我們在安裝外掛的時候，會呼叫Vue.use方法，所以全域性引入我們的外掛模組，在建立例項之前會自動查詢需要註冊的自定義外掛。

外掛模組的index.js

自己寫一個vue的loading外掛

建立loading模組資料夾

自己寫一個vue的loading外掛
在loading/index.js裡面寫我們的外掛 一個install,一個原型掛載方法【就是我們呼叫的】

自己寫一個vue的loading外掛
可以看到一個檔案結構，這樣可以在loading外掛模組裡面列印一下，看看全域性引入是否成功，然後index.vue就是我們的樣式模版，後面你會知道其實是一個“子類”

這一步主要是三個事情：

1.建立loading模組

2.外掛模組通過Vue.use安裝自定義外掛

3.全域性引入外掛

step3.寫靜態loading效果、通過Vue.extend掛載子類

當你發現你的loading外掛可以列印出東西之後，我們就確定了關係是確定了，只需要進一步深入發展了，我們先來寫一個靜態的loading效果，無非就是一個蒙版遮罩層、一個提示文案，長得好看一些的前端會寫一個icon轉圈圈 我們的index.vue檔案可以簡單的寫一個蒙版

自己寫一個vue的loading外掛
但是發現，那邊js檔案列印的還有，但是蒙版呢 ！！！！emmmmm？？？

安裝子類 qio黑板！！ 我們要把index.vue,引入我們的js檔案，來使用vue基礎構造器，並且掛載到我們的例項上才可以，那我們繼續往下走, 看看怎麼構造和掛載

自己寫一個vue的loading外掛
再重新整理頁面的話就可以看到一個蒙版了，證明我們的子類新增成功了。【當然，你必須在頁面呼叫this.$loadingself() 才可以】

自己寫一個vue的loading外掛

step3.擴充套件

一個外掛是不可能這麼死板的，我們用別人的都是icon可以自定義、標題可以自定義、還有隱藏的控制方法，所以我們也不能太low，就可以根據自己的需要擴充套件了。

其實，回想起來就是在呼叫的時候讓使用者傳入引數來控制，我們根據傳參作出相應的判斷即可。 先假裝傳入一些引數

// .vue檔案裡面呼叫的時候
this.$loadingself('小r正在載入了～', {
    icon: 'el-close',
    success: (res) => {
        ...
    }
})
// 定時器模擬非同步
setTimeout(() => {
  this.$loadingself.hide() // 掛載一個hide用來消失
}, 2000)
複製程式碼

這段程式碼估計寫習慣的人可以是信手拈來了，但是我們傳遞進去之後，該怎麼處理？ 我們需要在vue檔案中定義好需要的方法和data，然後直接改變或者是通過呼叫方法傳入也是可以的

自己寫一個vue的loading外掛
isShow: false //來控制loading的顯示和隱藏

然後在js檔案中直接改變即可

自己寫一個vue的loading外掛
這裡大家可以列印以下我們通過Vue.extend構造出來的這個子類，會發現我們在vue中定義的方法和data是可以直接訪問到的，引數直接就是包含元件選項的物件

最後可以試試點選啊，預設載入各種情況下的loading有沒有異常bug，自己有興趣的話還可以把success的回撥，或者給loading加一個漸變動畫、或者是加入promise也可以的 本文只算是vue的外掛的新手入門demo，可以當作一個小知識點

相關文章