useEventListener

2023年05月11日

柏拉文

越努力，越幸运

一、认识

---

useEventListener() 将添加和清除 DOM 事件监听器的逻辑也封装进一个组合式函数中

二、实现

---

import { onMounted, onUnmounted } from 'vue'

export function useEventListener(target: any, event: string, callback: (e: any) => void) {
  onMounted(() => {
    target.addEventListener(event, callback)
  })
  onUnmounted(() => {
    target.removeEventListener(event, callback)
  })
}

三、调用

---

3.1 鼠标监听器调用

import { ref } from 'vue'
import { useEventListener } from './useEventListener'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function handle(e: any) {
    x.value = e.pageX
    y.value = e.pageY
  }

  useEventListener(window, 'mousemove', handle)

  return { x, y }
}