參考代碼實現按鈕長按觸發邏輯
<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>