Vue 프로젝트의 버튼 흔들림 방지 처리

손떨림 방지의 개념과 의미

1. 컨셉

버튼을 연속적으로 클릭하면 버튼의 클릭 이벤트가 한 번만 발생하고, 연속 클릭이 끝난 후에는 버튼을 다시 클릭할 때만 버튼의 클릭 이벤트가 발생합니다.

2. 의미

버튼 흔들림 방지는 버튼 작동을 위한 것으로, 사용자가 버튼을 계속 클릭하면 버튼의 바인딩된 클릭 이벤트가 매번 트리거되어 여러 개의 잘못된 트리거가 발생합니다.

구현 프로세스

1. 지침을 정의하여

손떨림 방지 제한은 명령을 정의하여 달성됩니다. 손떨림 방지가 필요한 버튼에 손떨림 방지 명령을 추가하여 버튼의 손떨림 방지 작업 제한을 실현할 수 있습니다. 사용법은 간단합니다.

2. 코드 구현

// 点击防抖
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. 사용 사례 코드

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