ホームページ  >  に質問  >  本文

Vue3での手ぶれ補正実装方法

<p>フィルター入力ボックスがあり、項目のリストをフィルターしたいと考えています。リストが大きいため、ユーザー エクスペリエンスを向上させるために、ユーザーが入力を停止するまでフィルターの適用を遅らせるために手ぶれ補正を使用したいと考えています。これは、リストをフィルター処理するために filterText にバインドされている入力ボックスです。 </p> <pre class="brush:php;toolbar:false;"><input type="text" v-model="state.filterText" /></pre>
P粉055726146P粉055726146443日前622

全員に返信(2)返信します

  • P粉879517403

    P粉8795174032023-08-25 11:20:55

    こんにちは。ここで質問に答えるのは初めてなので、お気軽に答えを修正してください。大変感謝しています。 最も美しく軽量な解決策は、すべてのフォームでランダムに使用できるディレクティブをグローバルに作成することだと思います。

    まず、ディレクティブを含むファイルを作成します。 debouncer.js

    続いて手ぶれ補正機能を作成します

    リーリー

    このファイルを定義した後、main.js に移動してファイルをインポートし、エクスポートされた関数を使用できます。

    リーリー

    これで、入力ボックスでディレクティブを使用したい場合は、次のように実行するだけで済みます。インポートなどは必要ありません。

    リーリー

    v-model.lazy ディレクティブは、この方法を選択した場合に非常に重要です。デフォルトでは、入力イベントでバインドされたプロパティが更新されますが、このディレクティブを設定すると、変更イベントを待機することになります。手ぶれ補正機能で発行するイベント。これを行うと、入力を停止するか、タイムアウトが経過するまで (ディレクティブの値で設定可能)、v-model の自動更新が停止されます。 それが明確になることを願っています。

    返事
    0
  • P粉550257856

    P粉5502578562023-08-25 10:05:26

    テンプレート内のバインディングを確認したかったため、満足のいく解決策が見つからなかったので、解決策を共有することにしました。単純なデバウンス関数を作成し、次の構文を使用して動作をバインドしました。 リーリー

    テンプレートの構文は次のとおりです:

    リーリー

    返事
    0
  • キャンセル返事