vue项目中自定义鼠标图标实现

要做大屏项目，为了各个细节都充满炫酷的感觉，鼠标的样式也要修改一下，自定义成自己想要的样式。

1、先上效果图，两种展示方式

实现这个效果首先要创建在目录下创建一个styles文件夹，里面分别包括common.css、common.scss、custom-cursor.scss。

1、common.css文件里面这样写

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

#app {
  background: #020E2D;
}

2、common.scss这样写

@import url(./custom-cursor.scss);

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

#app {
  background: #020E2D;
}

// 自定义Select组件
.el-popover {
  &.custom-select-popover {
    padding: 6px 0 !important;
    margin: 0;
    box-sizing: border-box;
  }
}

3、custom-cursor.scss文件夹这样写

:root {
  --custom-cursor-auto: url(../img/cursor-auto@32.png) 9 4, auto;
  --custom-cursor-pointer: url(../img/cursor-pointer@32.png) 8 3, pointer;
}

.command-screen,
.scan-screen,
.marking-screen {
  cursor: var(--custom-cursor-auto);
}

canvas {
  cursor: var(--custom-cursor-auto) !important;
}

.custom-cursor-pointer {
  cursor: var(--custom-cursor-pointer) !important;
}

.custom-cursor-pointer-chart {
  canvas {
    cursor: var(--custom-cursor-pointer) !important;
  }
}

.linear-select {
  font-family: PingFangSC-Regular;

  .el-input__wrapper {
    box-shadow: none !important;
    background: transparent;
    background-color: transparent !important;
    cursor: var(--custom-cursor-pointer) !important;

    .el-input__inner {
      color: #fff;
      cursor: var(--custom-cursor-pointer);
    }

    .el-select__caret {
      cursor: var(--custom-cursor-pointer);
    }

    .el-select__caret {
      color: #fff !important;
    }
  }

  .el-input .el-input__wrapper.is-focus,
  .el-input.el-input--suffix.is-focus .el-input__wrapper {
    box-shadow: none !important;
  }
}

.linear-select-popper {
  border: none !important;
  background: #051535;
  opacity: 0.95;
  border-radius: 4px;
  box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.3);
  font-family: PingFangSC-Regular;
  cursor: var(--custom-cursor-auto);

  .el-select-dropdown__item {
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #051535;
    color: #fff;
    cursor: var(--custom-cursor-pointer);

    &.selected,
    &:hover,
    &.hover {
      color: #fff;
      background: linear-gradient(90deg,
          rgba(46, 206, 255, 0) 0%,
          rgba(90, 233, 255, 0.25) 50%,
          rgba(46, 206, 255, 0));
      border-image: linear-gradient(90deg,
          rgba(64, 207, 255, 0) 3%,
          #40cfff 35%,
          #40cfff 69%,
          rgba(64, 207, 255, 0) 97%) 1 1;
    }
  }

  .el-popper__arrow {
    display: none;
  }
}

.screen-date-picker-popper {
  border-color: #01091a !important;
  cursor: var(--custom-cursor-auto);

  .el-picker-panel__icon-btn {
    cursor: var(--custom-cursor-pointer);

    .el-icon {
      cursor: var(--custom-cursor-pointer);
    }
  }

  .el-date-table td {
    cursor: var(--custom-cursor-pointer);
  }

  .el-picker-panel {
    background: #051535;

    .el-date-table th,
    .el-date-range-picker__content,
    .el-picker-panel__icon-btn {
      color: #fff;
    }

    .el-date-table td.next-month,
    .el-date-table td.prev-month {
      color: rgba(255, 255, 255, 0.5);
    }

    .el-date-table td.today .el-date-table-cell__text {
      color: #40cfff;
    }

    .el-date-table th,
    .el-date-range-picker__content.is-left {
      border-color: #01091a;
    }
  }
}

好了，需要main.js全局引入 import './assets/styles/common.scss'

最后哪里用到这个鼠标的直接就可以使用了

//正常的鼠标样式
<template>
    <div class="marking-screen"> 添加的内容 </div>
</template>   

//小手的鼠标样式
<template>
    <div class="custom-cursor-pointer"> 添加的内容 </div>
</template>

如果是echarts图表使用创建一个 useECharts.js文件，把echarts所需配置加上

import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent
} from "echarts/components";
import { BarChart, LineChart, PieChart } from "echarts/charts";
import { UniversalTransition, LabelLayout } from 'echarts/features';
import { CanvasRenderer } from "echarts/renderers";

import customCursorPointerForChart from '../../components/customCursorPointerForChart'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
]);

export default function (selectors) {
  let chart = $ref(null)

  onMounted(() => {
    chart = echarts.init(document.querySelector(selectors))
    chart = customCursorPointerForChart(chart)
  })

  return $$(chart)
}

里面所需的customCursorPointerForChart.js这样配置

export default function (chart) {
  const zr = chart.getZr()
  const chartDom = chart.getDom()

  zr.on("mouseover", () => {
    chartDom.classList.add('custom-cursor-pointer-chart')
  });
  zr.on("mouseout", () => {
    chartDom.classList.remove('custom-cursor-pointer-chart')
  });

  return chart
};

项目中使用的话

 <div id="collegeChart" style="width: 530px; height: 550px; z-index: 1"></div>
<script setup>
import { useECharts } from "@/views/screen/scan/components/components";

var myChart = $(useECharts("#collegeChart"));
const getcollegeChart = () => {
  var option = {
    color: [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#FAB05E" },
        { offset: 1, color: "#F27830" },
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#FFD702 " },
        { offset: 1, color: "#FFAE01" },
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#5CE7F6" },
        { offset: 1, color: "#2F96EB" },
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#4AE3A0" },
        { offset: 1, color: "#24C367" },
      ]),
    ],
    tooltip: {
      trigger: "item",
      backgroundColor: "#051535",
      borderRadius: 4,
      borderColor: "#051535",
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
        color: "#ffffff",
      },
      width: 140, // 设置宽度
    },
    series: [
      {
        name: "考试总览",
        type: "pie",
        radius: ["45%", "60%"],
        center: ["48.5%", "50%"], // 调整饼图位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: getzberlist.value,
        itemStyle: {
          borderWidth: 3,
          borderColor: "#06296E",
        },
      },
    ],
  };
  toRaw(myChart).setOption(option);
};
</script>