Vue实现【fiveClick】2秒内5连击(五连击)vue事件自定义、双击自定义、任意次连击

简介: Vue实现【fiveClick】2秒内5连击(五连击)vue事件自定义、双击自定义、任意次连击
    // 2秒内5连击(默认)________________________
    multiClick(
      multiClickCallback,
      singleClickCallback,
      maxTimes = 5,
      time = 2000
    ) {
      this.clickTimes || (this.clickTimes = 0);
      ++this.clickTimes >= maxTimes &&
        (multiClickCallback && multiClickCallback(),
        singleClickCallback || (this.clickTimes = 0));
      this.clickTimes === 1 &&
        setTimeout(() => {
          this.clickTimes < maxTimes &&
            singleClickCallback &&
            singleClickCallback(); //执行单击or少于maxTimes次的点击
          this.clickTimes = 0;
        }, time);
    },
    // 双击场景demo________________________
    triggerMultiClick(data, node) {
      this.multiClick(
        () => {
          // 双击
        },
        () => {
          // 单击 
        },2,300
      );
    },


相关文章
|
6天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
63 7
使用 Vue CLI 脚手架生成 Vue 项目
|
3天前
|
JavaScript
|
2天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
1天前
|
JavaScript
vue知识点
vue知识点
10 3
|
4天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
1天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
7天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
9 1
|
7天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
20 1
|
9天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
16 3
|
9天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
26 2