封装一个基于Vue的loading加载组件

loading图是前端开发过程中非常实用的一项功能，它可以提升客户体验，缓解用户等待数据返回时的焦躁情绪。如果使用UI组件库开发，一般都会有对应的组件可以直接使用。那么如果不适用UI库，或者UI库的loading组件不适合自己的项目，应该怎么办呢？当然是自己封装一个了！下面就带领大家一起练习一下，封装一个loading加载组件及其使用方法。

工具/原料

vscode

cmd

vuejs

loading插件封装

1、首先，找到一张loading的gif图，存放在静态资源目录下。

2、r然后写一个展示该loading图的组件，在gif图外面包一层div，加上一个半透明的灰色背景，图片居中展示，到这一步为止有css基础的同学们应该都没问题。

3、接下来是重点的js部分，新建一个loading.js文件，引入Vue和之前写好的index.vue文件，并使用Vue.extend()创建一个index.vue的子类Loading。需要注意的是，此时的Loading还只是一个Vue 构造器，并不是一个实例，因此并没有被挂载到Dom树上。

loading插件的使用

1、我们使用loading的场景大多数是在发送请求到响应请求这段时间，这里以封装axios请求为例，在发送请求的拦截器中调用loading插件的open()方法，在响应请求的拦截器中调用loading的close()方法即可。