欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-element-admin 全局loading加載等待

 更新時間:2021年09月15日 08:53:03   作者:吃不胖的棒棒糖  
本文主要介紹了vue-element-admin 全局loading加載等待,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

最近遇到需求:

  全局加載loading,所有接口都要可以手動控制是否展示加載等待的功能

百度了一下,發(fā)現(xiàn)好多是寫在攔截器內(nèi)的,在攔截器內(nèi)調(diào)用element ui的loading方法,在接口請求的時候開始啟動加載loading,在接口返回和接口報錯拋異常的時候關(guān)閉loading

在這個思路上改動了一下,因為和我的需求有一點不同,我們的需求是可以手動控制是否展示加載等待的功能,既然是手動控制那么肯定不能直接在攔截器里面才開始調(diào)用loading方法了,往前推一步,在調(diào)接口的時候就開始控制是否啟用loading方法,我需要手動封裝axios的調(diào)用,以前開發(fā)的時候就封裝了axios, 代碼:

url:接口api,

data:參數(shù)

dom:html中的class或id傳參時需要加'./#',因為loading會用到j(luò)s的querySelector屬性方法,次屬性用于區(qū)分加載等待是整個頁面加載等待還是局部某一塊dom的加載等待---非必傳,默認(rèn)整個頁面加載等待

bool:區(qū)分是否開啟加載等待----非必傳,默認(rèn)開啟加載等待

圖片中我封裝了多個類型的axios,不是所有請求都需要加載等待,我這邊get請求默認(rèn)get請求是加載一些初始數(shù)據(jù)的,這些數(shù)據(jù)是不需要給客戶看到的;

我只在post內(nèi)加了這么多參數(shù)用于區(qū)分是否需要加載等待及全局和局部加載等待,另外axiosDownload請求是文件流類型,屬于比較特殊請求,區(qū)分出來便于開發(fā)中的數(shù)據(jù)處理,這一部分基本上全部都需要加載等待,因為要告訴客戶,數(shù)據(jù)正在下載

請求數(shù)據(jù)請求前的方法處理好了,請求后,返回的方法和網(wǎng)上的差不多都是返回結(jié)果時結(jié)束

處理掉一些干擾元素直接看攔截器的本質(zhì)內(nèi)容

攔截器的原理就是在發(fā)起請求的時候攔截一次,在返回的時候再攔截一次,在攔截器攔截前就已經(jīng)處理了加載等待了,請求時就不需要再調(diào)用加載等待了,只需要在返回攔截時去調(diào)用結(jié)束加載等待,

如下圖:

再看看關(guān)鍵的加載等待的方法,這個方法網(wǎng)上都有,這邊基本上也是借用網(wǎng)上大神的方法,時間有點久,忘記是哪位大神的代碼了,這邊貼不了原地址大佬的代碼,希望那位大佬看到不會生氣

方法到這里基本上就結(jié)束了全局加載等待

到此這篇關(guān)于vue-element-admin 全局loading加載等待的文章就介紹到這了,更多相關(guān)vue-element-admin 全局loading 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解hooks在vue3中的使用方法及示例

    詳解hooks在vue3中的使用方法及示例

    hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護(hù)性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下
    2023-09-09
  • vue 動態(tài)添加/刪除dom元素節(jié)點的操作代碼

    vue 動態(tài)添加/刪除dom元素節(jié)點的操作代碼

    這篇文章主要介紹了vue 動態(tài)添加/刪除dom元素,需要在點擊添加時,增加一行key/value的輸入框;點擊垃圾桶圖標(biāo)時,刪除對應(yīng)行,本文結(jié)合實例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • Vue仿手機(jī)qq的實例代碼(demo)

    Vue仿手機(jī)qq的實例代碼(demo)

    Vue.js(讀音 /vjuː/, 類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章給大家介紹Vue仿手機(jī)qq的實例代碼,需要的的朋友參考下吧
    2017-09-09
  • vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云

    vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云

    這篇文章介紹了vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • Vue 3項目如何安裝Element-Plus

    Vue 3項目如何安裝Element-Plus

    Element Plus 是一個基于 Vue 3 的現(xiàn)代前端UI框架,它旨在提升開發(fā)體驗,并為開發(fā)者提供高效、優(yōu)雅的組件,在本文中將詳細(xì)介紹如何在 Vue 3 項目中安裝 Element Plus,感興趣的朋友一起看看吧
    2024-07-07
  • vue3使用ref 獲取不到子組件屬性問題的解決辦法

    vue3使用ref 獲取不到子組件屬性問題的解決辦法

    父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問題,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
    2024-06-06
  • vue3如何添加eslint校驗(eslint-plugin-vue)

    vue3如何添加eslint校驗(eslint-plugin-vue)

    這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • vue移動端實現(xiàn)下拉刷新

    vue移動端實現(xiàn)下拉刷新

    我們通過原理講解以及代碼實例給大家分享了關(guān)于VUE實現(xiàn)移動下拉刷新的功能,有的朋友可以跟著學(xué)習(xí)下。
    2018-04-04
  • vue element實現(xiàn)表格增加刪除修改數(shù)據(jù)

    vue element實現(xiàn)表格增加刪除修改數(shù)據(jù)

    這篇文章主要為大家詳細(xì)介紹了vue element實現(xiàn)表格增加刪除修改數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • VUE axios上傳圖片到七牛的實例代碼

    VUE axios上傳圖片到七牛的實例代碼

    本篇文章主要介紹了VUE axios上傳圖片到七牛的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論