uni-app 如何避免点击跳转短时间内连续触发？

最新推荐文章于 2024-08-03 16:32:15 发布

置顶 G.Bro

最新推荐文章于 2024-08-03 16:32:15 发布

阅读量6.1k

点赞数 2

分类专栏： uin-app vue 文章标签： vue

本文链接：https://blog.csdn.net/fasdfdssdf/article/details/105531915

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

uin-app

5 篇文章 0 订阅

订阅专栏

uni-app开发过程中，我们在元素上加个事件进行页面跳转，连续点击会跳转多个页面；解决方案：写一个指令全局监听事件并阻止短时间内连续触发具体代码如下：

globalPul.js

const globalPul = {
	install: function(Vue, pluOp = {}) {
		// 全局点击事件监听阻止
		Vue.directive('preventReClick', {
			inserted(el, binding) {
				el.addEventListener('click', (e) => {
				if (!el.$disabled) {
						el.$disabled = true;
						el.$click=[...el.events.click];
						el.events.click = [];
						setTimeout(() => {
							el.events.click = el.$click;
							el.$disabled = false;
					
						}, binding.value || 1000)
					
					}
				})
			}
		})
	}
};

export default globalPul

main.js 引入该js

页面使用

<view class="m01_item" v-preventReClick @click ="toStudy()">
					<view class="menu_img">
						<image src="../../static/tiku/pasttest.png" mode=""></image>
					</view>
					<view class="menu_tit">
						历年真题
					</view>
				</view>