手把手带你实现vue全屏loading插件

功能分析

vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。

所以我们需要定义两个全局方法，一个是显示loading，叫$showLoading(),另一个叫$hideLoading()关闭全屏loading。

代码实现

上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插件通过插件动态给实例安装 显示和关闭Loading方法。

定义$loading插件，在Vue构造函数原型上添加两个方法

以下loading.js代码

const $loading = {
   
	install: (Vue) => {
   
		// 添加 显示loading方法
		Vue.prototype.$showLoading = () => {
   
			console.log('loading显示')
		}
		// 添加关闭loading方法
		Vue.prototype.$hideLoading = () => {
   
			console.log('loading关闭')
		}
	}
}

export default $loading;
// 使用时，在main.js入口函数中引入，使用插件即可安装
Vue.use($loading)

添加axios请求和相应拦截，调用显示和关闭loading方法

import Vue from 'vue';
// 定义Vue实例 调用全局显示