Vue 可以很容易地獲取屏幕鼠標位置,方法是使用 $event 對象。$event 對象是一個包含有關鼠標事件的詳細信息的對象。您可以使用它來獲取鼠標的 X 和 Y 坐標。
<template>
<div @mousemove="handleMouseMove">
<p>Mouse position: {{ mouseX }}, {{ mouseY }}</p>
</div>
</template>
<script>
export default {
data() {
return {
mouseX: 0,
mouseY: 0
}
},
methods: {
handleMouseMove(event) {
this.mouseX = event.clientX
this.mouseY = event.clientY
}
}
}
</script>
在此示例中,我們使用了 @mousemove 事件。handleMouseMove 方法在每次移動鼠標時都會被調用,并且我們已將 $event 對象作為參數傳遞給該方法。方法內部,我們可以使用 event.clientX 和 event.clientY 獲取 X 和 Y 坐標。
最后,我們將 X 和 Y 坐標分別存儲在數據屬性 mouseX 和 mouseY 中,并在模板中使用它們來顯示鼠標位置。
下一篇vue獲取屏幕