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("松开触发一次")
}