Procesamiento de botones anti-vibración en el proyecto vue

El concepto y la importancia del anti-vibración.

1. Concepto

Cuando se hace clic en el botón continuamente, el evento de clic del botón solo se activará una vez. Una vez finalizado el clic continuo, el evento de clic del botón se activará solo cuando se haga clic nuevamente en el botón.

2. Significado

El anti-vibración del botón es para la operación del botón. Cuando el usuario hace clic continuamente en el botón, el evento de clic vinculado del botón se activará cada vez, lo que provocará múltiples activadores no válidos.

Proceso de implementación

1. Definiendo instrucciones

Las restricciones antivibración se logran definiendo instrucciones. Puede agregar instrucciones antivibración a los botones que necesitan antivibración para realizar las restricciones de operación antivibración de los botones. El uso es simple.

2. Implementar el código

// 点击防抖
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. Código de caso de uso

// 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>