Vue——长按元素实现某种操作
首先描述一下需求,就是希望在长按元素的时候实现某种操作,话不多说,下面就介绍一下方法:
- 给需要长按的元素添加 touchstart 和 touchend 两个事件:
<div v-for="(item, index) in fileList" :key="index" @touchstart="touchstart(index,item)" @touchend="touchend(index)"> // 这里是循环的一些元素 </div>
- 在methods中添加事件:
touchstart(index,item) { clearInterval(this.Loop); //再次清空定时器,防止重复注册定时器 this.Loop = setTimeout(function() { //这里是长按以后需要触发的事件 }.bind(this), 1000); // 这里的1000是指需要长按的时间,单位为ms }, touchend(index) { // 这个方法主要是用来将每次手指移出之后将计时器清零 clearInterval(this.Loop); }
通过上面的两步就能实现长按事件了。