概要
通常情况下,我们在使用element-ui时会使用到loading组件。一般用于对表格请求响应时间过长的时候使用loading。然而依然有一些其他情况需要用的loading,这个时候,v-loading指令在其他组件上不生效了,所以官方提供了自定义loading组件的方法,也被称为服务方式,让我们一起来欣赏一下吧。
步骤
1.引入服务:import { Loading } from 'element-ui';
2.在合适的位置调用 let loadingInstance= Loading.service(options);
3.利用调用的返回值关闭loading loadingInstance.close();
参数
那么如何使他在我们需要的地方显示呢,这就需要配置options这个对象了;
target:
loading绑定的对象,可以传入dom对象,也可以传入字符串,传入字符串表示该字符串会被当做document.querySelecter的参数来获取覆盖的dom元素。默认值为document.body.;
body:
布尔值,表示是否插入到body之上,可作为指令修饰符使用,默认false;
fullscreen:
布尔值,表示是否全屏遮罩,可作为指令修饰符使用,默认为true;
lock:
布尔值,表示是否锁定屏幕滚动,可作为指令修饰符使用,默认为false;
text:加载时显示的内容
spinner:自定哟加载图标的类名
background:加载的背景颜色
示例:
接下里展示一个小案例,实现对话框表单的一个loading效果,话不多说,直接上图:
1.引入loading:
2.在提交表单时调用:
这里的target指的下面对话框的类名:
现在loading就可以显示出来了:
然后在提交完成之后,关闭loading:
这样就实现了服务方式的loading,更多配置大家可以多多尝试。over!