vue#customRef TypeScript Examples

The following examples show how to use vue#customRef. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.ts    From vue-i18n-next with MIT License 7 votes vote down vote up 
/* eslint-enable */

export function useDebouncedRef<T>(value: T, delay = 200): Ref<T> {
  let timeout: ReturnType<typeof setTimeout>
  return customRef<T>((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}
Example #2
Source File: index.ts    From vue3-ts-base with MIT License 6 votes vote down vote up 
/**
 * @description 使用自定义 ref 实现带防抖功能的 v-model ：
 * @param {any} value 要更改的值
 * @param {number} delay
 * @returns {T}
 */

export function useDebouncedRef<T>(value: T, delay = 200) {
  let timeout: any = null
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}
Example #3
Source File: useDebounce.ts    From vhook with MIT License 6 votes vote down vote up 
export function useDebounce<T>(value: T, delay = 200) {
  let timer: any
  const clear = () => {
    if (timer) {
      clearTimeout(timer)
    }
  }
  if (getCurrentInstance()) {
    onUnmounted(() => {
      clear()
    })
  }
  return customRef((tracker, trigger) => ({
    get() {
      tracker()
      return value
    },
    set(val: T) {
      clear()
      timer = setTimeout(() => {
        value = val
        timer = null
        trigger()
      }, delay)
    }
  }))
}