# 一个简单vue的更换鼠标样式的代码,move参数可以根据自己图片的大小调整
<template>
<div id="app" @mousemove="move">
<div v-if="show" ref="point" class="point" />
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
show: true
}
},
methods: {
move(e) {
this.$refs.point.style.left = e.pageX - 6 + 'px'
this.$refs.point.style.top = e.pageY - 10 + 'px'
}
}
}
</script>
<style lang="scss">
#app {
width: 100vw;
height: 100vh;
cursor: none;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.point {
pointer-events: none;
z-index: 999;
position: absolute;
transform: scale(0.6);
width: 29px;
height: 47px;
background: url("./assets/指针.png");
}
</style>