Vue3从0到1组件开发-业务组件：loading动画

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

loading动画的使用

loading动画已经在交互圈子里算是老常客了，老派的、时尚的、酷炫的也是各种各样，令人眼花缭乱。

尽管如此，这里也并没有将他作为基础组件，而是划分为业务组件，主要还是因为就使用来讲，网站讲究一个统一，虽然划分为基础组件也可以，但是从网站的适配角度来说，更倾向于一个定制的业务组件。

此外，不同的项目对loading的需求也是不同的， 这里以我在公司中移动端项目对loading的使用来做个讲解。

基础结构

loading的图案可以自行的绘制，这里在代码中不多提现。

这个基本没限制，gif、图片、svg、图标等等万物皆可loading。

<template>
  <yx-mask :maskClick="false" @change="change" ref="loading">
    <div class="loading-box">
     // loading dom
    </div>
  </yx-mask>
</template>

这里的mask是前面的组件中写过的，因为是移动端，所以loading的时候是需要一个遮罩的。

pc端则可以在局部loading，如github，页面中不同部分拆分开来分别加载。

逻辑部分

function open() {
  if (this.$refs.loading && this.$refs.loading.open()) {
    this.$refs.loading.open();
  } else {
    setTimeout(() => {
      if (this.$refs.loading && this.$refs.loading.open()) {
        this.$refs.loading.open();
      }
    }, 80);
  }
}
function close() {
  if (this.$refs.loading && this.$refs.loading.close()) {
    this.$refs.loading.close();
  } else {
    setTimeout(() => {
      if (this.$refs.loading && this.$refs.loading.close()) {
        this.$refs.loading.close();
      }
    }, 80);
  }
}
function change(e) {
  if (e.show) {
    setTimeout(() => {
      if (this.$refs.loading && this.$refs.loading.close()) {
        this.$refs.loading.close();
      }
    }, 10000);
  }
}

因为考虑到有些接口在请求时可能碰到网络不好等清空导致超时，所以这里在changge函数中添加了一个倒计时。

使得整个loading动画最多存在10秒钟，期间不允许点击遮罩关闭。 因为在遮罩组件中默认是可以通过点击关闭的。