vue鼠标长按事件js

在vue+elementUI的项目中，有时候需要实现单次点击进行缩放，但是单次点击缩放太慢了，所以要实现鼠标长按缩放事件，加快缩放的过程，你懂的，这一切都是为了用户体验，其实实现起来也很简单，就是定时器，具体参考代码如下：

//html部分
<template>
    <ul>
        <li @click="handlerZoom(0)"><i title="恢复" class="el-icon-aim"></i></li>
        <li @mousedown="loopZoom(0.1)" @mouseup="clearLoopZoom()" @click="handlerZoom(0.1)"><i title="放大" class="el-icon-zoom-in"></i></li>
        <li @mousedown="loopZoom(-0.1)" @mouseup="clearLoopZoom()" @click="handlerZoom(-0.1)"><i title="缩小" class="el-icon-zoom-out"></i></li>
    </ul>
</template>

//js部分
export default{
    data(){
        return{
            scale:1.0,
            setIntervals:"",
            timeOut:""
        }
    },
    methods:{
        handlerZoom(radios) {
            this.scale = !radios ? 1.0 : this.scale + radios
        },
        loopZoom(radios){
            this.timeOut = setTimeout(()=>{
                this.setIntervals = setInterval(()=>{
                    this.handlerZoom(radios)
                },50)
            },800)
        },
        clearLoopZoom(){
            clearTimeout(this.timeOut)
            this.timeOut = ""
            clearInterval(this.setIntervals)
            this.setIntervals = ""
        }
    }
}