Implémenter le traitement anti-tremblement des boutons du côté de vue-pc - instructions personnalisées

avant-propos

• Nous traitons souvent de l'anti-tremblement et de la limitation des boutons et des zones de saisie du côté mobile, mais nous effectuons rarement de telles opérations du côté PC.

• Cependant, il est également possible d'effectuer la fonction anti-shake du bouton côté PC, ce qui est également plus raisonnable : vous pouvez l'utiliser mais vous ne pouvez pas.

• Tant que nous coopérons avec la commande personnalisée du projet vue et ajoutons un enregistrement global, nous pouvons réaliser l'opération anti-tremblement du bouton.

• Et cette méthode fait un ajout. Après avoir enregistré la commande personnalisée globalement, il vous suffit de remplacer @click par v-antishake (commande personnalisée)

Désignation personnalisée du projet - structure globale du package d'enregistrement

 

Implémentation du code - le projet a des directives personnalisées

1. Créez le fichier antishake.js sous src/directive/module - le code est le suivant

export default {
  inserted (el, binding, vnode) {
    let timer = {}
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 2000)
    })
  }
}

​

2. Inscrivez-vous sous src/directive/index.js

// 按钮防抖处理
import antishake from './module/antishake'
​
const install = function (Vue) {
 
  // 按钮防抖处理
  Vue.directive('antishake', antishake)
}
​
​
export default install

3. Utilisez directement les instructions personnalisées au lieu de @click là où le bouton anti-tremblement est requis sur la page

// 原来点击事件
@click='事件'
// 现在点击事件-防抖处理-自定义点击事件
 v-antishake="事件"

---

Résumer:

Après ce processus, je pense que vous avez également une première impression profonde sur la mise en œuvre du traitement anti-tremblement des boutons du côté de vue-pc - instructions personnalisées, mais la situation que nous rencontrons dans le développement réel est définitivement différente, nous devons donc comprendre son Le principe reste inchangé. Allez, frappez les ouvriers !

Veuillez signaler toute lacune, merci -- Fengguowuhen