Vue click and hold
HTML
<div id="vue">
<button :class="{active:interval}" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">{{count}}</button>
</div>
CSS
.active{
color:green
}
button{
user-select:none
}
JavaScript
new Vue({
el:'#vue',
data(){
return {
interval:false,
count:0
}
},
methods:{
start(){
if(!this.interval){
this.interval = setInterval(() => this.count++, 30)
}
},
stop(){
clearInterval(this.interval)
this.interval = false
}
}
})