vue项目配合elementUI修改v-loading的图标icon等样式

一、修改element-ui的loading样式

// 设置loading
.el-loading-mask {
  background-color: rgba(0,0,0,.1);
  .el-loading-spinner {
    width: 162px;
    left: 50%;
    transform: translate(-50%);
    padding: 14px 0;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    .el-loading-text {
      margin-top: 14px;
      font-size: 14px;
      color: #515151;
      font-weight: 600;
    }
  }

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

二、在入口文件main.js中引入使用

import '@/styles/loading.scss' // loading样式修改

三、在vue文件中使用(直接写v-loading="loading"不会起作用)

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

四、配合接口封装使用（每次请求接口会触发loading）

这里是接口封装的部分代码，接口封装完整代码传送门：juejin.cn/post/704185…

// ！！！记得要在request.interceptors.response中清掉load
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, 0.1)'
    })
    return config
  },
  error => {
    // 请求错误回调函数
    console.log(error) // for debug
    return Promise.reject(error)
  }
)