脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 按钮防抖

vue 项目中实现按钮防抖方法

 更新时间：2022年12月13日 15:37:35   作者：夜久听山雨  
这篇文章主要介绍了vue 项目中实现按钮防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下

1.新建 .js文件存放防抖方法

// 防抖
export const antiShake= (fn, t) => {
  let delay = t || 1000
  let timer
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer)
    }
 
    let callNow = !timer
 
    timer = setTimeout(() => {
      timer = null
    }, delay)
 
    if (callNow) fn.apply(this, args)
  }
}

2.引入防抖文件,methods中添加方法

//引入防抖文件
import { antiShake } from '../../../../common/antiShake.js'; //防抖

methods: {  
         //给按钮添加防抖
        startDrawPolygon: antiShake(function () {
            this.getDepartments() //按钮触发的方法
        }),
}

3.html代码

<el-button @click="startDrawPolygon()" style="background-color:#409EFF; color: #FFF;" slot="append" icon="el-icon-search">搜索</el-button>

到此这篇关于vue 项目中实现按钮防抖的文章就介绍到这了,更多相关vue 按钮防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论