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 };
};
相关推荐
ZC跨境爬虫1 分钟前
Playwright核心操作实战精讲(QQ空间+百度+iframe,含等待_键盘_iframe操作)
前端·爬虫·python·计算机外设
GISer_Jing6 分钟前
GeoFlow-AI:智能三维地理空间处理平台
前端·人工智能·架构
WordPress学习笔记6 分钟前
建外贸独立站公司
前端·wordpress
OtIo TALL9 分钟前
Redis 6.2.7安装配置
前端·数据库·redis
ZC跨境爬虫10 分钟前
对称加密算法详解(DES篇):特点、实现与逆向实操
前端·javascript·爬虫
Hello--_--World15 分钟前
VUE3:基础篇官网笔记
前端·vue.js·笔记
我是伪码农20 分钟前
vue复习
前端·javascript·vue.js
我是伪码农28 分钟前
JS考核复写
前端·javascript·css
JianZhen✓31 分钟前
前端开发AI工具全攻略:Cursor省Token+模型选择+免VPN工具+万能提示词
前端·人工智能
祁鱼鱼鱼鱼鱼1 小时前
Location 字符匹配详解
linux·服务器·前端