vue中全局的自定义鼠标样式

1,325 阅读1分钟

# 一个简单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.cursor = 'none'
      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>