vue2自定义loading组件

概要

通常情况下，我们在使用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！