vue-debounce/src/directive.js

A simple vue directive for debounce

import debounce from './debounce.js'
import { mapOutListeningEvents, isEmpty, isLocked, shouldFireOnEmpty } from './_internals.js'

export default function ({
  lock = false,
  listenTo = 'keyup',
  defaultTime = '300ms',
  fireOnEmpty = false,
  cancelOnEmpty = false,
  trim = false
} = {}) {
  return {
    created (el, {
      value: debouncedFn,
      arg: timer = defaultTime,
      modifiers
    }, vnode) {
      const combinedRules = Object.assign({
        lock,
        trim,
        fireonempty: fireOnEmpty,
        cancelonempty: cancelOnEmpty
      }, modifiers)
      const events = mapOutListeningEvents(vnode.props, listenTo)
      const fn = debounce(e => {
        debouncedFn(e.target.value, e)
      }, timer)

      function handler (event) {
        const value = combinedRules.trim ? event.target.value.trim() : event.target.value

        if (isEmpty(value) && combinedRules.cancelonempty) {
          fn.cancel()
        } else if (isLocked(event.key, combinedRules) || shouldFireOnEmpty(value, event.key, combinedRules)) {
          fn.cancel()
          debouncedFn(event.target.value, event)
        } else {
          fn(event)
        }
      }

      events.forEach(e => {
        el.addEventListener(e, handler)
      })
    }
  }
}