同一个节点如何维护多个elementUI loading组件

Posted 2022-06-17 izerandom

Element提供了指令和服务两种方式使用它的loading组件

使用指令方式时只需在节点添加指令v-loading并给它一个变量来维护状态，就能实现开启与关闭

下面是element官网提供的服务方式调用loading组件的demo

let loadingInstance = Loading.service(options);
this.$nextTick(() =>  // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
);

 

显然，使用指令方式时，由于状态可以通过变量维护，因此我们能够灵活地通过任意函数维护状态来实现业务逻辑

但缺点是，同一个指令只能在同一个节点上绑定一次。

而使用服务方式时，可以通过修改options来实例化多个不同的loading实例，来满足不同的业务需求

但缺点是，为同一个非body节点添加多个服务时，需要传入target，此时单例将失效，因此如果创建了多个带target的服务，需要依次关闭

 

如何解决？

•  服务方式

创建一个数组，每创建一个服务时，将其推入数组，这样就能够灵活的创建多个服务并随时能够关闭指定的服务

• 指令方式

直接上代码

<div
    v-show="loading"
    class="absolute"
    v-loading="loading"
>
</div>
<style>
    &.absolute    
    　　position absolute
    　　top 0
    　　bottom 0
   　　 left 0
    　　right 0
</style>

 

 将此节点插入父节点，通过维护loading变量即可，需要维护多个状态就插入多个节点与创建多个变量。如插入两个节点分别维护加载状态与加载完成后列表为空状态

最好加上v-show(v-if)，因为absolute类覆盖了整个父节点，即使loading消失，层级仍然处在父节点之上，导致父节点中的其他节点事件如click,touch事件无效