uniapp封装长按一直触发事件和松开后触发一次的事件（自定义事件）

directives/longPress.js

export default {
	mounted(el, binding) {
		// 校验参数格式
		const {
			pressHandler,
			releaseHandler
		} =
		typeof binding.value === 'object' ?
			binding.value : {
				pressHandler: binding.value
			};

		if (typeof pressHandler !== 'function') {
			console.log('pressHandler====', pressHandler);
			console.error('v-longpress requires a press handler function');
			return;
		}

		let pressTimer = null;
		const rate = 25; // 每秒40次

		const start = () => {
			pressTimer = setInterval(() => {
				pressHandler();
			}, rate);
		};

		const stop = () => {
			if (pressTimer) {
				clearInterval(pressTimer);
				pressTimer = null;
				// 调用松开回调
				if (typeof releaseHandler === 'function') {
					releaseHandler();
				}
			}
		};

		el._longPressStart = start;
		el._longPressStop = stop;

		el.addEventListener('touchstart', start);
		el.addEventListener('touchend', stop);
		el.addEventListener('touchcancel', stop);
	},
	unmounted(el) {
		el.removeEventListener('touchstart', el._longPressStart);
		el.removeEventListener('touchend', el._longPressStop);
		el.removeEventListener('touchcancel', el._longPressStop);
		el._longPressStop();
	}
};

main.js

import {
	createSSRApp
} from 'vue'
import longPress from '@/directives/longPress';
import {
	createPinia
} from 'pinia'
export function createApp() {
	const app = createSSRApp(App)
	app.directive('longpress', longPress); //定义
	const pinia = createPinia()
	app.use(pinia)
	return {
		app
	}
}

组件使用

<view class="btn up" v-longpress="{
	      pressHandler: ()=>{handleLongPress('up')},
	      releaseHandler: ()=>{handleRelease('up')}
}"></view>

function handleLongPress(type) {
	console.log('长按触发一直触发')
}

function  handleRelease() {
	console.log("松开触发一次")
}