useMouseState

返回一个对象，包含了鼠标的位置信息：clientX, clientY, screenX, screenY。

由于在setup阶段，组件实例还没有挂载，无法直接获取到DOM节点的引用

使用

参数接收DOM节点的ID，如果为空则默认选择document节点。

import { useMouseState } from 'beautiful-vue-hooks'

export default {
  setup() {
    const {
      clientX,
      clientY,
      screenX,
      screenY
    } = useMouseState('#element-id')
    onMouseMove($event => {
      // ...
    })
    ...
  }
}

WARNING

在setup阶段，实例还没创建，无法获取到组件实例，如果目标节点为子组件，会获取不到DOM节点。如：

<Super>
  <div id="target"></div>
</Super>

在onMounted钩子中，只能保证当前组件的挂载，不能保证子组件挂载，因此不能保证获取到DOM节点。

示例

指定元素

通过元素ID指定鼠标事件的注册目标，需要注意的是目标元素不能选择子组件中的元素，包括通过slot渲染的组件。

全局注册

不传任何参数，则默认将鼠标事件注册到全局（document）节点。