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 按钮防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下2022-11-11
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
vue router使用query和params传参的使用和区别
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue scroller返回页面记住滚动位置的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-01-01
公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-02-02
vite+vue3搭建的工程实现批量导入store的module
这篇文章主要介绍了vite+vue3搭建的工程实现批量导入store的module方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue.js中created()与activated()的个人使用解读
这篇文章主要介绍了vue.js中created()与activated()的个人使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue3.0 beta 版本已经发布有一段时间了，今天这篇文章就带大家体验一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了Vue2 响应式系统之数组，本文接着上几篇文章Vue2响应式系统 、Vue2 响应式系统之分支切换，响应式系统之嵌套、响应式系统之深度响应 展开相关内容,需要的朋友可以参考一下2022-04-04
最新评论