快捷導(dǎo)航

在vue+element ui框架里實現(xiàn)lodash的debounce防抖

更新時間：2019年11月13日 09:41:21 作者：liangxhblog

今天小編就為大家分享一篇在vue+element ui框架里實現(xiàn)lodash的debounce防抖，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

事情起因在：我使用element ui框架里的遠程搜索框，在單選時，組件內(nèi)部已經(jīng)做了防抖，query是在一段時間內(nèi)的字符串。但是在多選時，并沒有做防抖，而是每輸入一個字符都要向后臺發(fā)一次請求，所以必須防抖，官方推薦使用lodash的debounce

在解決這個問題時，我遇到的坎兒主要有以下：

我首先在項目里用npm安裝lodash，先全局安裝，然后安裝到項目

npm install -g lodash
npm install --save lodash

安裝后，我就在我要用防抖的組件里，引入lodash

var lodash = require('lodash');

以下就開始了走彎路

我百度后，查詢到debounce總和keyup一起使用，所以我就在我的搜索框里綁定了keyup事件，但是綁定的事件并沒有生效，通過查詢得知，在element ui封裝了input，所以要在后面加上.native才可以覆蓋原來的事件

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  placeholder="請選擇跟進HR"
  @keyup.native="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

keyup成功綁定事件后，我發(fā)現(xiàn)得到的結(jié)果并不是我想要的，因為keyup綁定事件里得到的參數(shù)是我在鍵盤里輸入的一個字符，但我想要得到的是輸入后的整個字符串。所以我就又開始使用watch監(jiān)聽this.AddCandidateFrom.follow_hr

監(jiān)聽this.AddCandidateFrom.follow_hr后，我發(fā)現(xiàn)并沒有用，因為它代表的是多選框中已經(jīng)選中了的字符串，正在輸入的字符串不會記錄進去，所以我又回退到使用遠程搜索本身的方法，綁定remote-methods

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  remote
  placeholder="請選擇跟進HR"
  :remote-method="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

綁定了remote-method方法后，我就使用傳統(tǒng)的方法定義綁定的方法（），沒有使用es6簡寫的方法，這是因為，使用lodash.debounce返回的是一個函數(shù)。如果有參數(shù)，則在function空的形參列表里加入

getRemoteFollow: lodash.debounce(function () {
  console.log('111');
}, 300),

以上這篇在vue+element ui框架里實現(xiàn)lodash的debounce防抖就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vue+element ui框架里實現(xiàn)lodash的debounce防抖

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具