在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖
事情起因在：我使用element ui框架里的遠(yuǎn)程搜索框，在單選時(shí)，組件內(nèi)部已經(jīng)做了防抖，query是在一段時(shí)間內(nèi)的字符串。但是在多選時(shí)，并沒(méi)有做防抖，而是每輸入一個(gè)字符都要向后臺(tái)發(fā)一次請(qǐng)求，所以必須防抖，官方推薦使用lodash的debounce
在解決這個(gè)問(wèn)題時(shí)，我遇到的坎兒主要有以下：
我首先在項(xiàng)目里用npm安裝lodash，先全局安裝，然后安裝到項(xiàng)目
npm install -g lodash npm install --save lodash
安裝后，我就在我要用防抖的組件里，引入lodash
var lodash = require('lodash');
以下就開(kāi)始了走彎路
我百度后，查詢到debounce總和keyup一起使用，所以我就在我的搜索框里綁定了keyup事件，但是綁定的事件并沒(méi)有生效，通過(guò)查詢得知，在element ui封裝了input，所以要在后面加上.native才可以覆蓋原來(lái)的事件
<el-select
v-model="AddCandidateFrom.follow_hr"
filterable
multiple
placeholder="請(qǐng)選擇跟進(jìn)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é)果并不是我想要的，因?yàn)閗eyup綁定事件里得到的參數(shù)是我在鍵盤(pán)里輸入的一個(gè)字符，但我想要得到的是輸入后的整個(gè)字符串。所以我就又開(kāi)始使用watch監(jiān)聽(tīng)this.AddCandidateFrom.follow_hr
監(jiān)聽(tīng)this.AddCandidateFrom.follow_hr后，我發(fā)現(xiàn)并沒(méi)有用，因?yàn)樗淼氖嵌噙x框中已經(jīng)選中了的字符串，正在輸入的字符串不會(huì)記錄進(jìn)去，所以我又回退到使用遠(yuǎn)程搜索本身的方法，綁定remote-methods
<el-select
v-model="AddCandidateFrom.follow_hr"
filterable
multiple
remote
placeholder="請(qǐng)選擇跟進(jìn)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)的方法定義綁定的方法（），沒(méi)有使用es6簡(jiǎn)寫(xiě)的方法，這是因?yàn)?，使用lodash.debounce返回的是一個(gè)函數(shù)。如果有參數(shù)，則在function空的形參列表里加入
getRemoteFollow: lodash.debounce(function () {
console.log('111');
}, 300),
以上這篇在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue利用computer解決單項(xiàng)數(shù)據(jù)流的問(wèn)題詳解
Vue 是一個(gè)非常流行和強(qiáng)大的前端框架，它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來(lái)構(gòu)建用戶界面，今天我們來(lái)分享一個(gè) Vue 中非常經(jīng)典的問(wèn)題，也是一個(gè)非常實(shí)用的技巧，希望對(duì)大家有所幫助2023-07-07
詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue中img標(biāo)簽的src屬性總結(jié)(問(wèn)題解決)
初步接觸vue框架時(shí),好多朋友使用img標(biāo)簽時(shí),設(shè)置動(dòng)態(tài)src屬性時(shí),可能都會(huì)遇到路徑不生效的問(wèn)題,本文給大家介紹vue中img標(biāo)簽的src屬性總結(jié),感興趣的朋友一起看看吧2023-11-11
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過(guò)大、很慢等情況,為了解決這一問(wèn)題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11
vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實(shí)例形式分析了vue-router 路由傳參基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了如何為vue的項(xiàng)目添加單元測(cè)試，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了詳解vue不同環(huán)境配置不同的打包命令，主要包括正式環(huán)境、測(cè)試環(huán)境和開(kāi)發(fā)環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04