Element UI 框架中Loading 区域加载的使用方法

Bug Engineer

发布于 2023-12-25 15:00:18

2220

发布于 2023-12-25 15:00:18

Loading 加载用于加载数据时显示动效

Element UI中的Loading组件默认是全屏显示，大多时候出于美观考虑我们并不需要这种功能　而是让它显示在我们需要的地方，比如一个后台管理系统，我们和后台进行网络传输的时候，我们并不需要把导航栏和系统的头部覆盖住，只需要内容部分显示，这时候我们就需要对组件的参数进行设置。

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上

在某页单独的地方进行设置该组件很容易　直接按照官网实例写即可

但是像之前我们要求的那样，每次和后端的交互都要显示loading框的话，我们通常是把该组件写在封装好的axios.js文件中，这时候就有一个区域显示的问题，我的做法是把系统除了顶部导航和菜单栏之外的内容部分的顶层ＤＩＶ加入一个唯一的class，然后通过对　target　参数的设置　借助　document.querySelector　方法实现区域覆盖。

 get: function (url, params = {}) {
        let loadingInstance = Loading.service({
            text: '请稍等',
             **target: document.querySelector('.loadingtext')**
        });
        instance.defaults.headers.common['Authorization'] = Cookies.get('access_token');
        return new Promise((resolve, reject) => {
            instance.get(url, {
                params: params
            })
            .then( (response) => {
                if(response.data.code){
                    loadingInstance.close();
                    resolve(response.data);
                } else {
                    loadingInstance.close();
                    resolve(response.data);
                }
            })
            .catch( (error) => {
                this.$get( this.$url + 'error/error',{api_url: url, send_data: params,http_options: 1})
                    .then( (data) => {

                    })
                    .catch( (error) => {

                    })
                **loadingInstance.close();**
                reject(error)
            })
        })
    },