Ahao

Appearance

网站自定义鼠标事件

Tags:
技术博客搭建
🕒 Published at: 2 years ago

cursor-effects ​

本网站的鼠标样式就是该开源项目

有多种鼠标样式，详细请看文档

使用npm引入项目 ​

shell
npm install cursor-effects
npm install cursor-effects

使用js引入项目 ​

js
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>

错误方法 ​

  • 组件中直接引用

在需要的代码文件下import

直接在项目中import 然后进行使用，详细可看github官网

笔者在vitepress的dev环境中使用以上方法是能正常使用的，但是build之后在app元素无法正常渲染元素

js

import * as CursorEffects from "cursor-effects";

new CursorEffects.rainbowCursor({
    length: 8,
    colors: [  "#FE0000",
        "#FD8C00",
        "#FFE500",
        "#119F0B",
        "#0644B3",
        "#C22EDC",],
    size: 3,
})

import * as CursorEffects from "cursor-effects";

new CursorEffects.rainbowCursor({
    length: 8,
    colors: [  "#FE0000",
        "#FD8C00",
        "#FFE500",
        "#119F0B",
        "#0644B3",
        "#C22EDC",],
    size: 3,
})

正确方法 ​

  • 封装成组件才可正常使用

解决方法 ​

  • 新建MouseEvent.vue文件

定义以下内容，再在app.vue中引入并在tampelate模板中装载即可

vue
<template>

</template>

<script setup lang="ts">
import * as CursorEffects from "cursor-effects";

new CursorEffects.rainbowCursor({
  length: 8,
  colors: [  "#FE0000",
    "#FD8C00",
    "#FFE500",
    "#119F0B",
    "#0644B3",
    "#C22EDC",],
  size: 3,
})

</script>

<style scoped>

</style>
<template>

</template>

<script setup lang="ts">
import * as CursorEffects from "cursor-effects";

new CursorEffects.rainbowCursor({
  length: 8,
  colors: [  "#FE0000",
    "#FD8C00",
    "#FFE500",
    "#119F0B",
    "#0644B3",
    "#C22EDC",],
  size: 3,
})

</script>

<style scoped>

</style>

Last updated: