用Vue3写一个hook,作用是返回当前鼠标点击的横纵坐标的位置
时间: 2024-03-06 16:48:44 浏览: 15
好的,我可以帮你编写一个Vue3的hook来获取当前鼠标点击的横纵坐标位置。
```javascript
import { ref, onMounted, onUnmounted } from 'vue';
export default function useMousePosition() {
const x = ref(0);
const y = ref(0);
const updateMousePosition = (event) => {
x.value = event.pageX;
y.value = event.pageY;
};
onMounted(() => {
window.addEventListener('mousemove', updateMousePosition);
});
onUnmounted(() => {
window.removeEventListener('mousemove', updateMousePosition);
});
return {
x,
y,
};
}
```
这个hook使用了Vue3自带的 `ref` 来创建响应式数据,以及 `onMounted` 和 `onUnmounted` 生命周期钩子函数来监听 `mousemove` 事件的发生和销毁。
在 `updateMousePosition` 函数中,我们可以获取鼠标点击的横纵坐标位置,并将其更新到 `x` 和 `y` 变量中。
最后,我们将 `x` 和 `y` 变量作为对象属性返回,让它们在组件中可以直接使用。
你可以在组件中使用这个hook来获取鼠标点击的位置,例如:
```javascript
import useMousePosition from './useMousePosition';
export default {
setup() {
const { x, y } = useMousePosition();
return {
x,
y,
};
},
};
```
在模板中,你可以通过 `{{ x }}` 和 `{{ y }}` 来获取当前鼠标点击的横纵坐标位置。