uniapp的H5如何实现全局组件加载，类似uni.showToast？

在项目components文件夹新建一个base-loading文件夹，文件包括两个文件

第一个文件base-loading.vue

javascript 复制代码

<template>
	<u-overlay :show="visible" opacity="0.5">
		<view class="base-loading" v-show="visible">
			<base-image :src="loadingSrc" width="150px" height="150px" :loop="true"></base-image>
			<view class="text">
				{{ text }}
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import {
		EventBus
	} from './loading.js';
	export default {
		name: "base-loading",
		data() {
			return {
				loadingSrc: `/static/loading.gif`, // 图片自定义替换
				visible: false, // 控制显示/隐藏
				text: ""
			};
		},
		created() {},
		methods: {}
	}
</script>

<style lang="scss">
	.base-loading {
		height: 100%;
		width: 100%;
		z-index: 999999;
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.text {
			color: #e6e6e6; // #338CED
			font-size: 16px;
			letter-spacing: 1px; 
			font-weight: 600;
		}
	}
</style>

第二个文件 loading.js

javascript 复制代码

// import Vue from 'vue';

// // 创建一个 Vue 实例作为事件总线
// export const EventBus = new Vue();

// // 加载动画组件
// const LoadingComponent = Vue.extend(Loading);
// let loadingInstance;

// export function showLoading() {
// 	if (!loadingInstance) {
// 		loadingInstance = new LoadingComponent({
// 			el: document.createElement('div'),
// 		});
// 		document.body.appendChild(loadingInstance.$el);
// 	}
// 	instance.text = text;
// 	  instance.visible = true;
// }

// export function hideLoading() {
// 	if (loadingInstance) {
// 		EventBus.$emit('hide-loading');
// 	}
// }

import Vue from 'vue';
import LoadingComponent from './base-loading.vue'

// 创建一个Loading实例
const LoadingConstructor = Vue.extend(LoadingComponent);

let instance = null;

let timer = null

// 初始化Loading实例
function initInstance() {
	instance = new LoadingConstructor({
		el: document.createElement('div'),
	});
	document.body.appendChild(instance.$el);
}

// 显示Loading
function showLoading(text = '正在加载中...', time = 6000) {
	if (!instance) {
		initInstance();
	}
	instance.text = text;
	instance.visible = true;
	timer = setTimeout(() => {
		console.log("loading 自动关闭 --->", time);
		hideLoading()
	}, time)
}

// 隐藏Loading
function hideLoading() {
	if (instance) {
		instance.visible = false;
		clearTimeout(timer)
		timer = null
	}
}

export {
	showLoading,
	hideLoading
};

使用：

直接挂载在main.js页面

javascript 复制代码

// 载入加载弹窗
import mLoading from '@/components/base-loading/loading.js';
uni.y = mLoading

各个页面使用

javascript 复制代码

uni.y.showLoading('正在加载中...') //不传 默认正在，加载中...
uni.y.hideLoading()