Vue单击和双击事件
文章描述：
Vue单击和双击事件
第一种
<template>
<div>
<el-button type="primary"
v-on:click="clickselect"
v-on:dblclick="dblclickselect">click</el-button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods:{
clickselect:function(row){
console.log('1')
},
dblclickselect:function(row){
console.log('2')
}
}
}
</script>第二种
<template>
<div>
<div @click="clickHandle" @dblclick="dblclickHandle">点击</div>
</div>
</template>
<script>
var timeId = null;
export default {
data() {
return {
}
},
mounted() {
},
methods:{
clickHandle() {
// 清除上一次的定时器
clearTimeout(timeId)
timeId = setTimeout(() => {
// 单击事件执行逻辑
// ...
console.log('单击')
// 清除定时器
clearTimeout(timeId)
}, 250)
},
// 双击事件
dblclickHandle() {
// 清除单击事件的定时器
clearTimeout(timeId)
// 双击事件执行逻辑
// ...
console.log('双击')
}
}
}
</script>
发布时间：2023/07/09
发表评论