Traitement anti-tremblement des boutons dans le projet vue

Le concept et la signification de l'anti-shake

1. Concept

Lorsque le bouton est cliqué en continu, l'événement de clic du bouton ne sera déclenché qu'une seule fois. Une fois le clic continu terminé, l'événement de clic du bouton ne sera déclenché que lorsque le bouton sera à nouveau cliqué.

2. Signification

L'anti-tremblement du bouton est destiné au fonctionnement du bouton. Lorsque l'utilisateur clique continuellement sur le bouton, l'événement de clic lié du bouton sera déclenché à chaque fois, ce qui entraînera plusieurs déclencheurs invalides.

Processus de mise en œuvre

1. En définissant des instructions

Les restrictions anti-tremblement sont obtenues en définissant des instructions. Vous pouvez ajouter des instructions anti-tremblement aux boutons qui nécessitent un anti-tremblement pour réaliser les restrictions de fonctionnement anti-tremblement des boutons. L'utilisation est simple.

2. Implémentez le code

// 点击防抖
const throttle = {
  bind: (el, binding) => {
    let throttleTime = binding.value // 防抖时间
    if (!throttleTime) { // 用户若不设置防抖时间，则默认1s
      throttleTime = 1000
    }
    let timer
    let disable = false
    el.addEventListener('click', event => {
      if (timer) {
        clearTimeout(timer)
      }
      if (!disable) { // 第一次执行(一点击触发当前事件)
        disable = true
      } else {
        event && event.stopImmediatePropagation()
      }
      timer = setTimeout(() => {
        timer = null
        disable = false
      }, throttleTime)
    }, true)
  }
}

3. Utiliser le code de cas

// 1. 注册指令
Vue.directive('throttle', throttle);

// 2. 按钮添加防抖指令

// 2.1 普通按钮或dom节点也可添加指令实现防抖显示
// eg1:
<button v-throttle="2000">按钮防抖</button>


// 2.2 element组件按钮实现防抖
<el-button v-throttle="2000">按钮防抖</el-button>