要做大屏项目，为了各个细节都充满炫酷的感觉，鼠标的样式也要修改一下，自定义成自己想要的样式。
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>
鼠标图片可自取
