Vue3 + TS encapsula la función anti-vibración del botón global

En proyectos Vue3 + TS, a menudo necesitamos evitar la vibración de algunos botones para evitar problemas de rendimiento causados ​​por los clics frecuentes del usuario. Por lo tanto, podemos encapsular una función anti-vibración de botón global para simplificar el código y mejorar la eficiencia del desarrollo.

Pasos de implementación

1. Crea src/utils/debounce.tsun archivo.

2. En debounce.tsel archivo, importe lodashla biblioteca y escriba la función anti-vibración.

   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. En src/main.tsel archivo, monte la función antirrebote en el prototipo de la instancia de Vue para uso global.

   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. Utilice la función de la página $debouncepara estabilizar el botón.

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

Resumir

A través de los pasos anteriores, podemos implementar rápidamente la función anti-vibración del botón global en el proyecto Vue3 + TS, mejorando la reutilización del código y la eficiencia del desarrollo.