vue--如何在一个元素上实现单击事件和双击事件 执行的方法

<template>
	<!--添加单击事件和双击事件-->
    <div  @click="handleClick" @dblclick="dblClick"></div>
</template>

var time = null;  //  在这里定义time 为null 
<script>
	methods: {
    
    
		// 单击事件
        handleClick() {
    
     
       		clearTimeout(time);  //首先清除计时器
            time = setTimeout(() => {
    
    
				//这里执行你自己的方法或者业务逻辑
			},300)
       },
       // 双击事件
        dblClick(){
    
    
            clearTimeout(time);  //清除
			//这里可以添加你自己双击事件的方法或者逻辑
		}
	}
</script>