elementUI的loading效果——防止用户在页面运算时乱点

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/loading%23optionselementUI的loading官网文档，这里我着重使用Loading.service(options);方法

前言

Vue结合ElementUI是一个流行的前端技术组合，用于快速开发和搭建桌面端的界面。以下是关于这个组合的详细介绍：

1. 组件库：ElementUI是基于Vue 2.x版本开发的一套组件库。它为开发者提供了一系列的预制组件，如布局、导航、输入框、选择器等，这些组件均已预先设计好样式并封装了常用功能，使得开发者能够高效地构建出整洁且风格一致的用户界面。
2. 技术栈：vue-element-admin是一个以Vue和ElementUI为核心的后台管理系统解决方案。它不仅包含了ElementUI提供的组件，还整合了诸如国际化(i18n)、动态路由、权限验证等高级功能，帮助开发者构建企业级的中后台产品原型。
3. 安装与使用：要在Vue项目中使用ElementUI，首先需要通过npm或yarn将其安装到项目当中，然后在项目的main.js文件里引入ElementUI的样式和组件。完成这些步骤后，就可以在Vue组件中使用ElementUI提供的各类UI组件来构建页面了。
4. 主题定制：ElementUI支持自定义主题，你可以通过在线主题生成器或者手动配置，来更改组件库的颜色、字体等样式，以满足项目的个性化需求。
5. 版本更新：随着Vue框架的发展，ElementUI也在不断更新迭代。目前已经有了适配Vue 3.x版本的Element Plus，为使用最新版本Vue的开发者提供了更多的选项。

综上所述，Vue与ElementUI的结合为开发者提供了一个高效且功能强大的开发方式，特别是对于需要快速搭建具有丰富交互和良好用户体验的Web应用程序来说，这一组合无疑是一个极佳的选择。

---

具体使用方法：

第一步：引入loading

// ?引入elementUI的loading效果，用于防止图片处理过慢，用户乱点
import { Loading } from 'element-ui'

第二步：在需要loading的地方调用

  // 这里是loading遮罩层
        const loadingInstance = Loading.service({
          lock: true, // 锁定屏幕
          text: '处理中...'
        })

第三步：结束loading效果，解除页面锁定

    // ?loading实例对象名.close();用于关闭遮罩层
        loadingInstance.close()

具体场景演示：

        这是我封装的一个简单的axios请求方法，里面就在【请求拦截器】中设置了loading，这样，只要使用这个封装axios发起请求，就会在页面中出现loading效果，然后，在【响应拦截器】中添加了loadingInstance.close()，当请求返回后，就关闭loading效果

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

let ConfigBaseURL = ''
if (process.env.NODE_ENV === 'development') {
  console.log('当前是开发环境')
  ConfigBaseURL = 'xxxx'
} else if (process.env.NODE_ENV === 'production') {
  console.log('当前是生产环境')
  ConfigBaseURL = 'yyyy'
}
// 这里是loading遮罩层
let loadingInstance = null

// 使用create方法创建axios实例
const Service =
  axios.create({
   
    baseURL: ConfigBaseURL,
    timeout: 15000 // 请求超时时间
  
  })
// 添加请求拦截器==>当发送请求之前进行的方法
// ?网速快看不出效果，慢速网络下，只要开始发送请求，就会显示出loading效果了
Service.interceptors.request.use(config => {
  /**
   * 在需要调用时：
     * Loading.service(options);
     * 其中 options 参数为 Loading 的配置项，
  */
  loadingInstance = Loading.service({
    lock: true, // 锁定屏幕
    text: 'loading...'
  })
   console.log('请求发送前准备。。')
  return config
})

// 添加响应拦截器==》请求返回数据时触发的方法 【可根据返回的response的错误代码，来区分提示不同错误】
Service.interceptors.response.use(response => {
  // console.log('请求返回数据中了。。')
  //   loading实例对象名.close();用于关闭遮罩层
  loadingInstance.close()
  // console.log(response)
  return response.data
}, error => {
   console.log('请求错误==>', error)
  const msg = error.Message !== undefined ? error.Message : ''
  Message({
    // 是否显示msg的关闭按钮
    showClose: true,
    message: '网络请求错误' + msg,
    type: 'error',
    duration: 3 * 1000
  })
  //   loading实例对象名.close();用于关闭遮罩层
  loadingInstance.close()
  return Promise.reject(error)
})

// !暴露Service这个方法出去
// 对应的引入方法： import Service from './utils/Service.js'
// export default Service

// 对应的引入方法： import { Service } from './utils/Service.js'
export { Service }

---

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！