el-button长按触发事件（含未响应的解决方案）

参考代码实现按钮长按触发逻辑

html 复制代码

<template>
    <el-button @mousedown="handleMouseDown" @mouseup="handleMouseUp">长按我</el-button>
</template>

javascript 复制代码

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 监听组件根元素的原生事件，主要是给自定义的组件添加原生事件。

html 复制代码

<template>
      <el-button @mousedown.native="handleMouseDown" @mouseup.native="handleMouseUp">长按我</el-button>
 </template>