vloading

一、区域加载

Element 提供了两种调用 Loading 的方法&＃xff1a;指令和服务。对于自定义指令v-loading&＃xff0c;只需要绑定Boolean即可。默认状况下&＃xff0c;Loading 遮罩会插入到绑定元素的子节点&＃xff0c;通过添加body修饰符&＃xff0c;可以使遮罩插入至 DOM 中的 body 上。

>......


二、整页加载

当使用指令方式时&＃xff0c;全屏遮罩需要添加fullscreen修饰符&＃xff08;遮罩会插入至 body 上&＃xff09;&＃xff0c;此时若需要锁定屏幕的滚动&＃xff0c;可以使用lock修饰符&＃xff1b;当使用服务方式时&＃xff0c;遮罩默认即为全屏&＃xff0c;无需额外设置。

指令方式&＃xff1a;

指令方式


服务方式&＃xff1a;

openFullScreen2() {const loading &＃61; this.$loading({lock: true,text: &＃39;Loading&＃39;,spinner: &＃39;el-icon-loading&＃39;,background: &＃39;rgba(0, 0, 0, 0.7)&＃39;});setTimeout(() &＃61;> {loading.close();}, 2000);
}

通常我们在 axios 拦截器中&＃xff0c;使用服务指令来全局添加 loading 信息。

// 新增蒙层
var loading// request拦截器
$http.interceptors.request.use(config &＃61;> {if (config.loading !&＃61;&＃61; false) { // 可配置不用蒙层&＃xff0c;参考 src/api/base/goods.js 中 getPageQuery 方法。// 新增接口请求时蒙层loading &＃61; window.vm.$loading({lock: true,text: &＃39;Loading&＃39;,spinner: &＃39;el-icon-loading&＃39;,background: &＃39;rgba(0, 0, 0, 0.7)&＃39;,})}return config
}, error &＃61;> {// Do something with request errorconsole.log(error) // for debugPromise.reject(error)
})


三、自定义

在绑定了v-loading指令的元素上添加element-loading-text属性&＃xff0c;其值会被渲染为加载文案&＃xff0c;并显示在加载图标的下方。类似地&＃xff0c;element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

>......


更多详情&＃xff0c;请查看&＃xff1a;element-ui 之 loading 组件。