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>
Logo

前往低代码交流专区

更多推荐