Vue3+TS はグローバル ボタンの手ぶれ防止機能をカプセル化します

Vue3 + TS プロジェクトでは、ユーザーが頻繁にクリックすることによって引き起こされるパフォーマンスの問題を回避するために、一部のボタンのシェイク補正が必要になることがよくあります。したがって、グローバル ボタンの手ぶれ補正機能をカプセル化してコードを簡素化し、開発効率を向上させることができます。

実装手順

1. src/utils/debounce.tsファイルを作成します。

2. debounce.tsファイル内にlodashライブラリをインポートし、手ぶれ補正機能を記述します。

   import _ from 'lodash';
   
   export function debounce<T extends (...args: any[]) => any>(
     fn: T,
     delay: number = 300
   ): T {
         
         
     return _.debounce(fn, delay, {
         
          leading: true, trailing: false }) as T;
   }
   
   

3. このファイルではsrc/main.ts、グローバルで使用できるように、デバウンス関数を Vue インスタンスのプロトタイプにマウントします。

   import {
         
          createApp } from 'vue';
   import App from './App.vue';
   import {
         
          debounce } from './utils/debounce';
   
   const app = createApp(App);
   
   app.config.globalProperties.$debounce = debounce;
   
   app.mount('#app');
   
   

4. ページ内の機能を使用して$debounceボタンを安定させます。

   <template>
     <button @click="$debounce(() => handleClick(), 500)">点击</button>
   </template>
   
   <script lang="ts">
   import {
         
          defineComponent } from 'vue';
   
   export default defineComponent({
         
         
     methods: {
         
         
       handleClick() {
         
         
         console.log('按钮被点击了');
       },
     },
   });
   </script>
   
   

要約する

上記の手順により、Vue3 + TS プロジェクトにグローバル ボタン手ぶれ補正機能を迅速に実装でき、コードの再利用性と開発効率が向上します。