vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法

更新時(shí)間：2022年12月13日 15:37:35 作者：夜久聽山雨

這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

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() //按鈕觸發(fā)的方法
        }),
}

3.html代碼

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

到此這篇關(guān)于vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖的文章就介紹到這了,更多相關(guān)vue 按鈕防抖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue的Props實(shí)例配置詳解
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個(gè)級別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下
2022-11-11
element中使用formdata進(jìn)行上傳文件的方法
本文主要介紹了elementUI中使用formdata進(jìn)行上傳文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼
這篇文章主要介紹了vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
手把手教你如何在vue項(xiàng)目中使用rem布局
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認(rèn)真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module
這篇文章主要介紹了vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue.js中created()與activated()的個(gè)人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue冷門技巧遞歸組件實(shí)踐示例詳解
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue3.0 上手體驗(yàn)
vue3.0 beta 版本已經(jīng)發(fā)布有一段時(shí)間了，今天這篇文章就帶大家體驗(yàn)一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組，本文接著上幾篇文章Vue2響應(yīng)式系統(tǒng)?、Vue2?響應(yīng)式系統(tǒng)之分支切換，響應(yīng)式系統(tǒng)之嵌套、響應(yīng)式系統(tǒng)之深度響應(yīng)?展開相關(guān)內(nèi)容,需要的朋友可以參考一下
2022-04-04