我试图在Vue3中创建一个自定义光标,但是我的代码不起作用。
<template>
<div id="cursor" :style="cursorPoint"></div>
</template>
<style>
#cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: white;
top: 0;
left: 0;
z-index: 10000;
}
</style>
<script>
export default {
data() {
return {
x: 0,
y: 0,
}
},
methods: {
moveCursor(e) {
this.x = e.clientX - 15;
this.y = e.clientY - 15;
}
},
computed: {
return: `transform: translate(${this.x}px,${this.y}px)`
},
mounted() {
document.addEventListener("mousemove", this.moveCursor);
}
}
</script>
控制台显示此错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'x')
1条答案
按热度按时间mtb9vblg1#
您的计算应包含
cursorPoint
变量: