Element UI 中 loading 的使用

2021-08-18 13:55:45 字數 1606 閱讀 5506

一:

一般element-ui都是給**加loading效果,也可以給整個頁面(body)加loading效果。

當然也可以頁面上的任何dom加loading效果。

在查詢button的標籤上新增onsearch方法。查詢1

onsearch() );

settimeout(() => , 2000);

也有取消loading效果的方法

loading.close()

二:loading 還可以以服務的方式呼叫。引入 loading 服務:

import from 'element-ui';

在需要呼叫時:

loading.service(options);

其中 options 引數為 loading 的配置項,具體見下表。loadingservice 會返回乙個 loading 例項,可通過呼叫該例項的 close 方法來關閉它:

let loadinginstance = loading.service(options);

this.$nexttick(() => );

需要注意的是,以服務的方式呼叫的全屏 loading 是單例的:若在前乙個全屏 loading 關閉前再次呼叫全屏 loading,並不會建立乙個新的 loading 例項,而是返回現有全屏 loading 的例項:

let loadinginstance1 = loading.service();

let loadinginstance2 = loading.service();

console.log(loadinginstance1 === loadinginstance2); // true

此時呼叫它們中任意乙個的 close 方法都能關閉這個全屏 loading。

如果完整引入了 element,那麼 vue.prototype 上會有乙個全域性方法 $loading,它的呼叫方式為:this.$loading(options),同樣會返回乙個 loading 例項。

引數說明

型別可選值

預設值target

loading 需要覆蓋的 dom 節點。可傳入乙個 dom 物件或字串;若傳入字串,則會將其作為引數傳入 document.queryselector以獲取到對應 dom 節點

object/string

—document.body

body

同 v-loading 指令中的 body 修飾符

boolean

—false

fullscreen

同 v-loading 指令中的 fullscreen 修飾符

boolean

—true

lock

同 v-loading 指令中的 lock 修飾符

boolean

—false

text

顯示在載入圖示下方的載入文案

string——

spinner

自定義載入圖示類名

string——

background

遮罩背景色

string——

customclass

loading 的自定義類名

string——

cocos2d htmml5修改loading介面

1.loading載入頁什麼時候呼叫的?答 在cocos html5專案的main.js裡呼叫的 如下 cc.loaderscene.preload g resources,function this 在ccloaderscene.js檔案中,可以找到cc.loaderscene.preload函式...

VUE專案axios請求時,顯示loading

1.在src目錄下的main.js檔案中,引入 import axios from axios import mint from mint ui vue.use mint 2.axios發起請求時,顯示loading axios發起請求時,顯示loading axios.interceptors.r...

element ui中的穿梭框

在element ui中有乙個不常用但還是比較炫的乙個元件,就是穿梭框。他要實現的就是把左面的選中然後傳送到右面表示選中,或者右面的傳送到左面表示取消。首先我們看文件的話會得到基本的穿梭框 即 首先我們來分析一下,cities是放資料的地方,data是左邊資料,value2是右面的資料 首先會將ci...