vue+element uiフレームの中でlodashのdebounceの手ぶれ防止を実現します。


事情の原因は:私はelement uiフレームの中の遠隔検索ボックスを使って、単一選択の時に、コンポーネントの内部はすでに手ぶれ防止をしました。queryはしばらくの間の文字列です。ただし、複数選択の場合は、手ぶれ防止はしていませんが、入力する文字ごとにバックグラウンドにお願いしますので、手ぶれを防ぐ必要があります。公式のおすすめは、lodashのdebounceです。
この問題を解決する時、私が遭遇した問題は主に以下の通りです。
まずプロジェクトの中でnpmでlodashをインストールして、まず全体的にインストールして、プロジェクトにインストールします。

npm install -g lodash
npm install --save lodash
インストール後、私は手ぶれ防止のセットで、lodashを導入します。

var lodash = require('lodash');
次は回り道を始めます。
私はBaiduの後、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がイベントを成功裏に結びつけると、keyupバインディングイベントで得られたパラメータはキーボードに入力した文字ですが、入力後の文字列全体がほしいという結果が得られました。だから私はまたwatchを使ってthis.AddCadidateFrom.followowを監督し始めました。hr。
聞き役のthis.Add CadidateFrom.followhr後、私は役に立たないことを発見しました。それは多選択ボックスで選択された文字列を表しています。入力中の文字列は記録されません。ですから、また遠隔検索を使って自分の方法を返して、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メソッドを結合した後、従来の方法でバインディングを定義する方法()は、es 6を使って簡単に書く方法がないので、lodash.debounceを使って戻るのは関数です。パラメータがあれば、functionの空のイメージリストに追加します。

getRemoteFollow: lodash.debounce(function () {
  console.log('111');
}, 300),
以上の本はvue+element uiの枠組みの中でlodashのdebounceの震え防止を実現しました。つまり、小編纂は皆さんに共有された内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。