vue+element uiフレームの中でlodashのdebounceの手ぶれ防止を実現します。
2373 ワード
事情の原因は:私はelement uiフレームの中の遠隔検索ボックスを使って、単一選択の時に、コンポーネントの内部はすでに手ぶれ防止をしました。queryはしばらくの間の文字列です。ただし、複数選択の場合は、手ぶれ防止はしていませんが、入力する文字ごとにバックグラウンドにお願いしますので、手ぶれを防ぐ必要があります。公式のおすすめは、lodashのdebounceです。
この問題を解決する時、私が遭遇した問題は主に以下の通りです。
まずプロジェクトの中でnpmでlodashをインストールして、まず全体的にインストールして、プロジェクトにインストールします。
私はBaiduの後、debounceとkeyupを調べました。だから、私は検索ボックスでkeyupイベントをバインドしました。しかし、バインディングされたイベントは有効ではありませんでした。調べてみますと、element uiにinputをカプセル化しました。だから、後に加えます。nativeは元のイベントをカバーできます。
聞き役のthis.Add CadidateFrom.followhr後、私は役に立たないことを発見しました。それは多選択ボックスで選択された文字列を表しています。入力中の文字列は記録されません。ですから、また遠隔検索を使って自分の方法を返して、remote-methodsを結びつけます。
この問題を解決する時、私が遭遇した問題は主に以下の通りです。
まずプロジェクトの中で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の震え防止を実現しました。つまり、小編纂は皆さんに共有された内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。