vue.js3:用el-loading显示加载动画(vue@3.2.37 / element-plus@2.2.2)

一，el-loading

1，文档地址：

https://element-plus.gitee.io/zh-CN/component/loading.html

2,  查看element-plus的版本:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus
imgtouch@0.1.0 /data/vue/imgtouch
└── element-plus@2.2.2

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/03/vue-js3-yong-elloading-xian-shi-jia-zai-dong-hua-vue-3-2-37/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码:

1,封装类:

import { ElLoading } from 'element-plus';

// 定义请求次数的变量，记录当前页面总共请求的次数
let loadingRequestCount = 0;
// 初始化loading
let loadingInstance;

//显示loading的函数 并且记录请求次数 ++
const showLoading = () => {
    if (loadingRequestCount === 0) {
        //ElLoading.
        loadingInstance = ElLoading.service({
            //color:'#ff0000',
            fullscreen:true,
            lock:true,
            text:'加载中...',
            //spinner:'el-icon-loading',
            //customClass:'lb-loading-icon-cls',
            background:'rgba(0, 0, 0, 0.3)'
        });
    }
    loadingRequestCount++
}

//隐藏loading的函数，并且记录请求次数 --
const hideLoading = () => {
    if (loadingRequestCount <= 0) return
    loadingRequestCount--
    if (loadingRequestCount === 0) {
        loadingInstance.close();
    }
}

export {
    showLoading,
    hideLoading
}

2,调用

<template>
<div>
  <div style="width:800px;margin: auto;display: flex;flex-direction: column;">
  <div>
    <input type="button" value="得到用户信息" @click="getUserInfo" />
  </div>
</div>
</div>
</template>

<script>
import axios from 'axios'
import { showLoading, hideLoading } from '@/utils/loading'

export default {
  name: "LoadingComp",
  setup() {
    //获取用户信息
    const getUserInfo = () => {
      showLoading();
      let url = "/api/home/home";
      let getData = {
        msg:'hello',
      };
      axios({
        method:"get",
        url:url,
        params:getData,
      }).then((res) => {
            hideLoading();
            console.log(res.data);
            if (res.data.code == 0) {
              let data = res.data.data;
              alert("success:content:"+data.content);
            } else {
              alert("error:"+res.data.msg);
            }
          }
      ).catch(err=>{
        hideLoading();
        console.log(err);
        alert('网络错误:'+err.message);
      });
    }

    return {
      getUserInfo,
    }
  }
}
</script>

<style scoped>
</style>

三，测试效果

四，查看vue框架的版本:

root@lhdpc:/data/vue/axios# npm list vue
axios@0.1.0 /data/vue/axios
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped