封裝js外掛程式(loading)

2022-08-25 11:45:26 字數 1752 閱讀 8547

在loading資料夾中寫兩個檔案loading.js與loading.vue

loading.js

1 import loading from

'./index.vue';

2 import vue from

'vue';

3 export default()=>,

10methods:,

14handledestory()17}

18})

1920

return

child;

21 }

loading.vue檔案為乙個loading的模版,從html+css+loading外掛程式庫中取出來的

1

2class="

loader

" v-if="

flag

">//

利用v-if操控外掛程式的顯示與消失。

3class="

loader-inner

">

4class="

loader-line-wrap

">

5class="

loader-line

">67

class="

loader-line-wrap

">

8class="

loader-line

">910

class="

loader-line-wrap

">

11class="

loader-line

">

1213

class="

loader-line-wrap

">

14class="

loader-line

">

1516

class="

loader-line-wrap

">

17class="

loader-line

">

1819

2021

222328

29

同時在http檔案中,

1 import loading from

'../lib/loading/index.js';

2345 let vm=loading()//

如果不寫這個的話,則下面兩步操作的可能不是乙個vm,所以在這一步,將

6vm物件存起來。78

910在資料請求的時候顯示loading

1112 server.interceptors.request.use((config)=>

15 }else

if(config.method.touppercase()==="

post")

18vm.handlemount();

19return

config;

20 },(err)=>)

2324

2526

在資料傳回來的時候去掉loading。

27 server.interceptors.response.use((res)=>

32 },(err)=>)

3536 export default (method,url,data={})=>)

41 }else

if(method.touppercase()=="

post

")

封裝JS外掛程式

jquery 根據json物件填充form表單 author en param fromid form表單id param jsondate json物件 上面的是樣式還是 的注釋 解釋。反正是自己封裝js 的第一步。封裝js的 就是為了方便使用,就比如可以封裝一些常用的 不用重複書寫多次。func...

js外掛程式封裝

封裝乙個js外掛程式其實非常簡單 第一步,先拿出需要封裝功能函式 function options 第二步,避免外掛程式內引數與專案中發生衝突,需要給外掛程式設定作用域 封閉作用域之後在外部如何呼叫呢 第三步,將外掛程式內函式暴露出去 this.call this typeof window und...

js封裝成外掛程式

由於專案原因,工作一年多還沒用js寫過外掛程式,專案太成熟,平時基本都是在使用已經封裝好的功能外掛程式。感覺自己好low.這兩天想自己抽空寫乙個canvas畫統計圖與折現圖的外掛程式,所以就去網上學習了下如何封裝.雖然之前看了很多原始碼,但是感覺就算了解也是野路子.什麼是封裝呢?我的理解就是 把乙個...