参考代码实现按钮长按触发逻辑
<template><el-button @mousedown="handleMouseDown" @mouseup="handleMouseUp">长按我</el-button>
</template>
data(){return{isPressed: false,timer: null,}},methods:{handleMouseDown() {this.isPressed = true;this.timer = setTimeout(() => {if (this.isPressed) {// 这里可以放置长按后的操作,例如:this.longPressAction();}}, 500); // 500毫秒后视为长按},handleMouseUp() {console.log('song')this.isPressed = false;clearTimeout(this.timer); // 清除定时器,防止长按操作被触发},longPressAction() {console.log('long chang')}
}
然后发现长按后,事件无法触发
找到以下解决方案
加 .native。native 监听组件根元素的原生事件, 主要是给自定义的组件添加原生事件。
<template><el-button @mousedown.native="handleMouseDown" @mouseup.native="handleMouseUp">长按我</el-button></template>