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)
            })
        })
    },