Skip to content

使用ahooks

antd配合ahooks使用兼容性更好和风格保持一致。访问ahooks官网:https://ahooks.js.org/zh-CN ,查看hooks列表:
Alt text

1. 使用useMouse

安装ahooks:

cmd
npm i ahooks

ahooks提供了获取鼠标位置的钩子函数:

jsx
import { useMouse } from 'ahooks'

function App() {
  // 使用ahooks
  const mouse = useMouse()
  return (
    <>
      hello App
      <br />
      <br />
      (pageX: {mouse.pageX}, pageY: {mouse.pageY})
      <br />
      (clientX: {mouse.clientX}, clientY: {mouse.clientY})
      <br />
      (screenX: {mouse.screenX}, screenY: {mouse.screenY})
    </>
  )
}
export default App

运行效果: Alt text 可以看到ahooks中的useMouse比我们自己实现的功能更加强大。