51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
import ULoadingPage from 'uview-ui/components/u-loading-page/u-loading-page'; // 确保正确引入组件
|
|
|
|
export default {
|
|
install(Vue) {
|
|
// 注册 u-loading-page 组件为全局组件
|
|
Vue.component('u-loading-page', ULoadingPage);
|
|
|
|
// 用于存储全局的 loading 组件实例
|
|
let loadingInstance = null;
|
|
|
|
// 创建一个全局的显示 loading 的方法
|
|
Vue.prototype.$showLoading = function () {
|
|
// 如果没有创建过实例，则创建一个
|
|
if (!loadingInstance) {
|
|
const LoadingConstructor = Vue.extend({
|
|
data() {
|
|
return {
|
|
loading: true, // 控制 loading 显示的状态
|
|
};
|
|
},
|
|
render(h) {
|
|
return h('u-loading-page', {
|
|
props: {
|
|
loading: this.loading,
|
|
loadingText: '',
|
|
loadingColor: "#000",
|
|
iconSize: '58rpx',
|
|
},
|
|
style: {
|
|
zIndex: '200',
|
|
opacity: 0.7
|
|
}
|
|
});
|
|
}
|
|
});
|
|
loadingInstance = new LoadingConstructor();
|
|
loadingInstance.$mount(); // 手动挂载实例
|
|
document.body.appendChild(loadingInstance.$el); // 将组件挂载到 body
|
|
}
|
|
loadingInstance.loading = true; // 显示 loading
|
|
};
|
|
|
|
// 创建一个全局的隐藏 loading 的方法
|
|
Vue.prototype.$hideLoading = function () {
|
|
if (loadingInstance) {
|
|
loadingInstance.loading = false; // 隐藏 loading
|
|
}
|
|
};
|
|
},
|
|
};
|