mouseHook vue 鼠标移动hook

<template>
  <div class="home" ref='element'>

    <div ref='hoverEle' >
      <Card style='margin: 20% auto; width: 600px' title='' >
        
        <div v-for='(value, key) of state' :key='key'>
          {{ key }} : {{ value }}
        </div>

      </Card>
    </div>
    
  </div>
</template>

<script>
// import { ref } from '@vue/composition-api'
import mouseHook from '@/hooks/mouseHook'

export default { 

  setup(){
 
    const state = mouseHook()
   
    return {
      
      state
      
    }
    

  }

}
</script>

import { ref, onMounted, onUnmounted } from '@vue/composition-api'


/**
 * 鼠标移动监听 hook
 * @returns { ref } state 数据对象
 * 
 */
export default function mouseHook(){
    const state = ref({})
    

    const moveHandler = event => {

        const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
        state.value = { screenX, screenY, clientX, clientY, pageX, pageY }

    }
    
    onMounted(() => {
        document.addEventListener('mousemove', moveHandler)
    })
    
    onUnmounted(() =>{
        document.removeEventListener('mousemove', moveHandler)
    })


    return state
    
}