js自定义鼠标的图片

1.首先下载一张svg格式的图片用编译器打开copy代码
2.svg转换函数 methods
getSvg(html, offsetX, offsetY) {
return `url(data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(html)))}
) ${offsetX} ${offsetY},default`;
},

3.在data里面定义一个常量
mouseImg: this.getSvg(`<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24.972 24">
<defs>
<style>
.cls-1 {
fill: #42aac5;
}
</style>
</defs>
<path id="路径_4548" data-name="路径 4548" class="cls-1" d="M14.665,22.973a.99.99,0,0,1-.511.889,1.078,1.078,0,0,1-1.057,0,.99.99,0,0,1-.511-.889V8.989a.974.974,0,0,1,.208-.6L17.788,2H3.222L8.216,8.39a.974.974,0,0,1,.208.6v8.575L10.2,19.27a.971.971,0,0,1,0,1.412,1.071,1.071,0,0,1-1.471,0l-2.081-2a.979.979,0,0,1-.3-.706V9.323L.308,1.6A1,1,0,0,1,1.141,0H19.868A1,1,0,0,1,20.7,1.6L14.665,9.323v13.65Zm3.122-10.987H24.03a1,1,0,1,1,0,2H17.787a1,1,0,1,1,0-2Zm0,4H24.03a1,1,0,1,1,0,2H17.787a1,1,0,1,1,0-2Zm0,4H24.03a1,1,0,1,1,0,2H17.787a1,1,0,1,1,0-2Z" transform="translate(-0.098)"/>
</svg>`, 25, 25),
4.在mounted()里面 修改 鼠标经过的标签的样式 this.$refs.bullet.style.cursor = this.mouseImg;

原文地址:https://www.cnblogs.com/daifuchao/p/14611320.html