vue自定义loading全局组件，可以选择多种不同loading风格

1.先看一下目录结构
一般情况下，每一个组件都新建一个新的文件夹，里面包含对应的vue文件，和js文件，如下图：

2.实现组件代码

loading.vue代码
大部分的代码主要是为了实现loading的动画，如果嫌代码太多可以将代码封装一下。

<template>
	<div v-if="isShowLoading" class="loading-container">
		<div class="loading-box">
			
			<div v-if="seletedType === 'balls' " style="fill: rgb(255, 73, 73); width: 40px; height: 40px;">
				<svg x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
					<path transform="translate(-8 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12">
					  <animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keyTimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"></animateTransform>
					</path>
					<path transform="translate(2 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12">
					  <animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keyTimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"></animateTransform>
					</path>
					<path transform="translate(12 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
					  <animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keyTimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"></animateTransform>
					</path>
					<path transform="translate(24 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
					  <animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keyTimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"></animateTransform>
					</path>
				</svg>
			</div>
			
			<div v-if="seletedType === 'bars' " style="fill: rgb(32, 160, 255); width: 30px; height: 30px;">
				<svg x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
					<rect x="0" y="13" width="4" height="5">
					  <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
					  <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
					</rect>
					<rect x="10" y="13" width="4" height="5">
					  <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
					  <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
					</rect>
					<rect x="20" y="13" width="4" height="5">
					  <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
					  <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
					</rect>
				</svg>
			</div>
			
			<div v-if="seletedType === 'spin' " style="fill: black; width: 50px; height: 50px;">
				 <svg x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
					<path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
						<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
					</path>
				</svg>
			</div>
			
			<span class="loading-txt">{{content}}</span>
		</div>
	</div>
</template>

<script>
	
export default {
	data () {
		return {
			isShowLoading: false,
			content: '',
			seletedType: ''
		}
	}
}
</script>

<style scoped>
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 1000;
	}
	.loading-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		background: #e7e7e7;
	}
	
	.loading-txt {
		font-size: 12px;
		color: #000;
	}
</style>

js代码

import Vue from 'Vue'
import LoadingComponent from './loading.vue'

const Loading = {}
let showLoading = false // 存储loading显示状态
let loadingNode = null // 存储loading节点元素
const LoadingConstructor = Vue.extend(LoadingComponent)

Loading.install = function (Vue) {
	Vue.prototype.$loading = function (tips,type, method) {
		if (method === 'hide') {
			loadingNode.isShowLoading = showLoading = false
		} else {
			if (showLoading) {
				return
			}
			if(type != 'spin' && type != 'balls' && type != 'bars'){
				type = 'balls';
			}
			loadingNode = new LoadingConstructor({
				data: {
					isShowLoading: showLoading,
					content: tips,
					seletedType: type
				}		 
			})
			loadingNode.$mount()
			document.body.appendChild(loadingNode.$el)
			loadingNode.isShowLoading = showLoading = true
		}
	};
	
	['show', 'hide'].forEach(function (method) {
		Vue.prototype.$loading[method] = function (tips, type) {
			return Vue.prototype.$loading(tips, type,method)
		}
	})
}

export default Loading

以上就是这个组件的全部代码，创建文件后直接把代码拷进去就行了。
创建完这个组件后，我们开始使用它吧。

3.使用过程

因为在一个项目中，loading组件可能要使用到多处地方，所以我们在main.js中把它定义为全局组件。

在main.js文件中导入这个组件

import Loading from './components/loading/loading'//注意路径是否正确
Vue.use(Loading)

导入这个组件后，我们就可以直接使用这个组件了，简单吧

使用方法

1.显示loading的方法

this.$loading.show('拼命加载中','ball');

该方法传递两个参数，第一个参数是显示的文本信息，第二个参数是设置动画的类型。若是不传参数的话则默认空的文本信息和ball动画效果（即“小球”滚动效果）。
第二个参数可以传递的值有：spin、ball、bars。效果实现依次为顶部的效果展示。若传递的值错误则默认为ball。

2.隐藏loading的方法

this.$loading.hide();