【前端案例】 18 - 自定义鼠标图标

自定义鼠标图标样式

    div {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 300px;
      height: 300px;
      cursor: url(../image/cursor_icon.ico), default;
      border: 1px solid #ccc;
    }

注意这里的属性使用逗号分隔

在vue中使用 ico 图标的时候遇到的问题

error  in ./src/assets/images/cursor_icon.ico
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

出现的问题

解决方法

1. 在 vue-cli3中需要在根目录下自定义一个文件 vue.config.js，文件内容：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('image')
      .test(/\.ico$/)
      .use('url-loader')
      .loader('url-loader')
  }
}