ElementUI组件loading自定义loading图标icon的方法

利用element的loading，自定义icon图标有很多种方法，此次为了记录一下近期我在项目中用到的其中一种

1、html部分

html部分这样设置是为了配合第二部中scss的结构，如果只写 v-loading="loading" 与下面scss对应的结构就不一样

  <div
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-text="正在加载中..."
   >
      <!-- 这里是内容 -->
      <!-- 这里是内容 -->
      <!-- 这里是内容 -->
  </div>

2、css部分

考虑到自定义icon图标的引入路径问题，可以将如下css单独写到一个scss文件里，然后在main.js中全局引入

// 设置loading
.el-loading-mask {
  background-color: rgba(0,0,0,1);
  .el-loading-spinner {
    width: 142px;
    padding: 12px 20px;
    background: #fcf3e3;
    box-sizing: border-box;
    .el-loading-text {
      margin-top: 12px;
      font-size: 16px;
      color: #515151;
      font-weight: 600;
    }
  }

  .el-loading-spinner i {
    &::before { display: none; }
    width: 48px;
    height: 48px;
    background: url('../../../assets/images/common/loading-icon.svg') no-repeat;
    background-size: 100% 100%;
  }
}

3、在main.js入口文件中引入该scss文件就可以了

import '@/assets/style/css/loading.scss'

最后插入一句，其实在request请求封装中可以全局配置loading（部分代码如下）

如需查看完整的request请求封装可以访问这个链接juejin.cn/post/704185…

import { Message, Loading } from 'element-ui'

let load
// request interceptor
request.interceptors.request.use(
  config => {
    // do something before request is sent

    // token赋值
    config.headers['token'] = getToken()
    config.headers['userId'] = getUserId()
    load = Loading.service({
      lock: true,
      text: '正在加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 1)'
    })
    return config
  },
  error => {
    // 请求错误回调函数
    console.log(error) // for debug
    return Promise.reject(error)
  }
)