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

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

第一个文件base-loading.vue

第二个文件 loading.js

// 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页面

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

各个页面使用

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