改造一下上次vue的loading外掛程式

2021-09-08 20:42:10 字數 1616 閱讀 9551

上一次我們將loading元件封裝成了外掛程式,基本上使用起來並沒有多大問題,剛好足夠使用。我們現在來稍微改造一些這個loading外掛程式,實現乙個簡單的功能,使之能夠延遲關閉loading這個浮層。

目前這個外掛程式我們只能夠this.$vloading.show()和this.$vloading.hide()這兩個方法,若是想要其實現延遲關閉,我們需要在hide這個方法裡面傳遞乙個延遲關閉的引數,可以是預先設定好的slow, medium或者fast這種引數進去,或者直接傳遞乙個延遲的時間。

再發一下上次的**截圖:

相信很多人看出來了這**其實寫得並不是那麼美觀(嘔~寫的時候並沒有這感覺啊),所有邏輯操作都寫在了install的方法裡面了,看起來有點亂。其實我們只需要在外面寫好一些方法邏輯,然後在統一起來掛載到vue例項上面。

有點跑題了,不過這次我修改我一併優化了這個loading外掛程式的**,使之看起來更「合理」。剛才說到要傳引數給這個hide的方法,那我們就應該在hide裡面接收乙個引數,並且設定好相對應的延遲。先貼一下我這次優化後的**,如下圖:

可以看到,在定義hide的那個方法裡面,我們接受了乙個叫做delaytime的引數,也就是說我們在使用這個方法的時候,我們應該這樣傳遞:this.$vloading.hide()。可是我們為啥要這樣子傳乙個物件進去?而不是直接this.$vloading.hide(800)這樣子,畢竟這裡只有乙個引數而已?這樣子做其實是為了**的可讀性,別人一看就知道,哦這裡是延遲了800ms就hide浮層。

讓我們看下內部實現**部分,

這次的優化,是看到element-ui外掛程式在頁面上的一些行為,才想到優化,跟它們一樣。畢竟人家這麼做肯定有道理。先看下**:

在沒有優化之前,頁面上已經插入了該外掛程式的節點。

在優化之後,我們構造了loading的例項,但我們不著急將其插入到頁面中,而是等到我們呼叫才將其插入,如果隱藏不用的話,就將其移除。在頁面上就不會出現相對應的注釋節點。其實我不清楚知道這裡是為啥,估計應該是vue的虛擬dom什麼的一些節點用的,暫時搞不清楚element在這裡如果外掛程式不使用的話就將其節點移除。希望了解的能幫忙說明一下。

改造一下C Substring 函式

c 的substring 函式中,如果我們一不小心輸入乙個擷取長度大於字串的長時,就會收到乙個異常 startindex cannot be larger than length of string 如 網頁執行之後 insus.net的要求是,只要輸入乙個大於或是等於0的數值時,它就能幫助我們擷取...

改造一下jeecg中的部門樹

關於 jeecg 提供的部門樹,相信很多小夥伴都已經用過了,今天假裝有那麼乙個需求 部門樹彈窗選擇預設展開下級部門 帶著這個需求再次去探索一下吧。片段 t departselect 關於selectednamesinputid與selectedidsinputid屬性 使用 t departsele...

總結一下《vue的使用》

1.用vue建立專案的時候,1.安裝axios,對axios進行處理,建立axios.js檔案,設定基礎請求位址,設定前置守衛和獨享守衛,對請求資料進行設定,特別實在進行token驗證的時候特別需要設定 2.後台伺服器如果跨域,需要在根目錄建立vue.config.js具體參考vue官網的介紹 3....