vue+element ui实现全局loading

该博客介绍了如何在前端使用Ajax请求时实现全局Loading效果,以防止用户在数据加载过程中点击其他按钮。通过引入Element-UI库的Loading组件,定义了开始和结束Loading的方法,并在请求拦截器中进行调用,确保所有请求完成后关闭Loading。同时,针对请求错误状态如401、404等进行了处理,提供友好的用户反馈。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

应用场景

场景:前端在发送Ajax请求,请求后台数据时,不允许用户点击当前页面的其他按钮。
  1. 引入loading
import { Loading } from 'element-ui'
  1. 定义全局loading
// loading框设置局部刷新,且所有请求完成后关闭loading框
let loading
function startLoading() {
  loading = Loading.service({
    fullscreen: true,
    background: 'rgba(0, 0, 0, 0)'
  })
}
function endLoading() {
  loading.close()
}
// 声明一个对象用于存储请求个数
let needLoadingRequestCount = 0
function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}
function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}
  1. 调用
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 30000 // request timeout
})
let checkToken = true
// request interceptor 请求拦截器
service.interceptors.request.use(
  config => {
    showFullScreenLoading()
    let token = store.getters.token
    const diedTime = store.getters.diedTime
    const refreshTime = store.getters.refreshTime
    if (token) {
      let tmp = Date.parse(new Date()).toString()
      tmp = tmp.substr(0, 10)
      if (tmp >= refreshTime && tmp < diedTime && checkToken) {
        checkToken = false
        getToken().then(res => {
          checkToken = true
          store.commit('user/SET_TOKEN', res.data.token)
          store.commit('user/SET_DIEDTIME', res.data.died_time)
          store.commit('user/SET_REFRESHTIME', res.data.refresh_time)
          token = store.getters.token
        })
      } else if (tmp >= diedTime) {
        tryHideFullScreenLoading()
        store.commit('user/DEL_TOKEN')
        router.replace({
          path: '/login'
        })
      }
      config.headers.Authorization = token // 请求头部添加token
    }
    return config
  },
  error => {
    tryHideFullScreenLoading()
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    tryHideFullScreenLoading()
    const code = response.status
    if ((code >= 200 && code < 300) || code === 304) {
      return Promise.resolve(response.data)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    tryHideFullScreenLoading()
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回401 清除token信息并跳转到登陆页面
          Message.error('签名认证已过期,请重新登录!')
          router.replace({
            path: '/login',
            query: {
              redirect: '/product-list'
            }
          })
          break
        case 404:
          Message.error('网络请求不存在')
          break
        case 422:
          Message.error('您的账号已被删除,请联系系统管理员确认情况!')
          router.replace({
            path: '/login',
            query: {
              redirect: '/product-list'
            }
          })
          break
        case 500:
          Message.error('网站后台请求错误')
          break
        default:
          Message.error(error.response.data.message)
      }
    } else {
      // 请求超时或者网络有问题
      if (error.message.includes('timeout')) {
        Message.error('请求超时!请检查网络是否正常')
      } else {
        Message.error('请求失败,请检查网络是否已连接')
      }
    }
    return Promise.reject(error)
  }
)
Vue 2 中使用 Element UI 进行全局设置 loading 样式,你可以通过修改 Element 的主题变量来定制 loading 组件的外观。Element UI 提供了 `el-loading` 全局 CSS 类名,通常在 `element-loading` 下。 首先,你需要找到 Element UI 的主题配置文件,它通常是 `~/.vuepress/public/theme-chalk/variables.scss` 或者你自己项目的 `src/assets/styles/theme.variables.scss`(如果使用 Vue CLI)。在这个文件里,可以找到与加载状态相关的变量,比如: ```scss $primary-color: #009688; // 主题颜色,这会影响到 loading 状态的颜色 $loading-bg: rgba(255, 255, 255, .8); // 加载框背景色 $loading-text-color: $text-color; // 文字颜色 // 可能需要修改的变量,例如圆环颜色、动画等 $loading-circle-color: currentColor; $loading-spinner-color: currentColor; .el-loading-mask { background-color: $loading-bg; // 设置默认 loading 背景色 } .el-loading { color: $loading-text-color; // 设置文字颜色 // 如果有自定义的loading图标样式,可以在这里调整 } ``` 然后,将这些变量应用到项目中。如果你使用 SCSS 或者 Less,可以直接引用这些变量;如果是 Vue.js 配置,可以在 `main.js` 文件中引入并覆盖默认主题: ```javascript import Vue from 'vue'; import App from './App.vue'; // 引入主题变量 import { defineTheme } from '@element-plus/theme-chalk'; const theme = defineTheme(); // 将新主题应用到Vue实例上 Vue.prototype.$ELEMENT = { loading: { text: '加载中...', // 自定义文本 spinner: 'el-icon-loading', // 或者使用自定义的icon名称 background: theme.loading.background, color: theme.loading.text, }, }; new Vue({ render: h => h(App), }).$mount('#app'); ``` 这样,你的项目就会全局生效新的 loading 样式。如果你想对特定组件进行单独设置,只需在组件内使用自定义属性覆盖默认样式即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值