vue2封装hook函数,可以监听主页面生命周期

使用方法

const loader = delayedDisplayLoading('检查中...', 300, this);//第二个参数是this

const res = await checkSettingRule({ materialId: obj.id, deptId: this.currentDeptId }).finally(() => {

loader.hide();//ajax请求完成后务必清理

});

这里有疑问,那页面销毁呢,如何清理

这里就要用到vue2魔法啦,直接看函数实现

复制代码
// 延迟显示加载中弹窗,默认300毫秒
// vm: 可选参数,传入组件的 this,页面销毁时会自动调用 hide
export const delayedDisplayLoading = (msg = '加载中...', delay = 300, vm = null) => {
	uni.hideLoading();
	const timer = setTimeout(() => {
		uni.showLoading({
			title: msg,
			mask: true,
		});
	}, delay);

	const hide = () => {
		if (timer) {
			clearTimeout(timer);
		}
		uni.hideLoading();
		// 如果是手动调用的 hide,需要移除监听器,防止内存残留和重复执行
		if (vm && typeof vm.$off === 'function') {
			vm.$off('hook:beforeDestroy', hide);
		}
	};

	// 如果传入了 Vue 实例,利用 hook 机制自动绑定销毁事件
	if (vm && typeof vm.$once === 'function') {
		vm.$once('hook:beforeDestroy', hide);
	}
	return { hide };
};
相关推荐
云空14 分钟前
《Three.js 完整版3D魔方:带贴纸+中心固定+自动求解复原》
前端·javascript·3d·three.js
酸梅果茶16 分钟前
【7】lightning_lm项目-LIO 前端 -IVox 局部地图
前端·slam
gis开发之家34 分钟前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
Hyyy42 分钟前
流式渲染的基础——SSE
前端·后端·面试
云空1 小时前
《Three.js 可操控3D魔方(键盘转动+打乱+复原)》
javascript·学习·游戏·3d·three.js
Csvn1 小时前
📐 Layout Thrashing——一个 `offsetHeight` 让你的页面卡成 PPT
前端
qq_529599382 小时前
react js循环滚动
前端·javascript·react.js
濮水大叔2 小时前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
索西引擎2 小时前
【React】严格模式:开发阶段质量保障的静态分析机制
前端·react.js·前端框架
张人玉2 小时前
Vue 3 + ECharts 智慧城市大屏——赣州智慧城市数据可视化平台
vue.js·echarts·智慧城市