Vue3，TS和Element-plus全局配置调用axiosf服务ElLoading效果修改样式2022/6/17am

新建hooks/loading.ts文件
import { ElLoading } from 'element-plus'

let loading: { close: () => void; }
function openLoading () {
  loading = ElLoading.service({
    // body: true,
    lock: true,
    // spinner: 'el-icon-loading',
    background: 'rgba(255, 255, 255, 0.5)',
    customClass: 'osloading' // 重点，修改样式类名
  })
}
function closeLoading () {
  loading.close()
}
export {
  openLoading,
  closeLoading
}

在axios/request.ts中使用

import axios from 'axios'
import { openLoading, closeLoading } from '@/hooks/Loading' 重点调用
const instance = axios.create({
  // 这里千万不能写headers否则会造成数据缓存
  timeout: 300000
})
/** **** request拦截器==>对请求参数做处理 ******/
instance.interceptors.request.use(
  (config) => {

    // const value = sessionStorage.getItem('token')
    // if (value) {
    //   const configall: any = config
    //   configall.headers.Authorization = 'Bearer ' + value
    // }
    openLoading() 请求时调用

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
/** **** respone拦截器==>对响应做处理 ******/
instance.interceptors.response.use(
  (response) => {
   
    setTimeout(() => {
      closeLoading()   响应数据后关闭loading
    }, 200)

    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)
export default instance

全局修改样式，并在main.ts中调用

.osloading .el-loading-spinner {//这里添加图片样式
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;

}
.osloading .el-loading-spinner .path {
   stroke-width:3;
   stroke:#6a49ac;
}
// 这里写入需要的文字样式
.osloading .el-loading-spinner::after{
  content: 'loading...';
  color: #6a49ac;
  font-size: 20px;
}