element-ui的Loading组件使用问题记录
这里我使用的是以服务方式引入的Loading,参考网上给的全局配置文件,整理了一下。在使用过程中发现了一些问题。在vue项目文件夹中,这里我就在utils中创建了一个loading.js文件,用来写全局配置:以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的Loading 实例,而是返回现有全屏 Loading
这里我使用的是以服务方式引入的Loading,参考网上给的全局配置文件,整理了一下。在使用过程中发现了一些问题。
在vue项目文件夹中,这里我就在utils
中创建了一个loading.js
文件,用来写全局配置:
以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的Loading 实例,而是返回现有全屏 Loading 的实例
所以,下面设置了一个needLoadingRequestCount
变量来记录创建Loading实例的个数,只有当实例个数为0时才会去关闭或开启另一个实例。
import { Loading } from 'element-ui'
let needLoadingRequestCount = 0
let loading
function startLoading() {
loading = Loading.service({
target: document.querySelector('.content-loading'),
lock: true,
text: '拼命加载中...',
background: 'rgba(0, 0, 0, 0.8)',
spinner: 'el-icon-loading'
})
}
function endLoading() {
// 指定target后,每次返回的都是单独的实例,所以要在调用新的loading之前检测是否有实例存在,如果有择用close方法
loading && loading.close()
}
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
在使用时,只需要在axios
文件中为请求添加一个showLoading
请求头:
import axios from 'axios'
import { showFullScreenLoading, tryHideFullScreenLoading } from 'utils/loading'
// import Qs from 'qs'
// import store from '@/store'
axios.defaults.withCredentials = true
var instance = axios.create({
// 默认方法设置
method: 'POST',
// xhrFields: { withCredentials: true },
//返回数据的格式
//其可选项是arraybuffer,blob,document,json,text,stream
responseType: 'json',
xsrfCookieName: 'XSRF-TOKEN',
// 返回数据设置,有data和headers两个参数
transformRequest: [
function(data) {
// TODO处理请求参数
// data = Qs.stringify(data)
return data
}
],
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
// 请求超时设置
timeout: 30000,
showLoading: true
})
然后在请求拦截器中,根据请求头的showLoading
判断是否需要调用Loading
:
// response处理
instance.interceptors.response.use(
response => {
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
console.log('response-------', response)
return response.data
},
error => {
tryHideFullScreenLoading()
return Promise.reject(error)
}
)
instance.interceptors.request.use(
config => {
console.log('config', config)
if (config.showLoading) {
showFullScreenLoading()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
上面步骤就可以在请求时,调用Loading
页面。下面记录一下常见问题:
1. Loading.service
中全局设置时target
要加选择器符号
2. 在分页跳转请求时不出现Loading
的原因:
场景是这样的:第一次进入页面,Loading正常加载,然后我滑动到页面的最下方。点击下一页,由于我这里下一页是需要发送请求的。所以正常情况根据配置的Loading,这时会出现Loading页面,但是我这里却没有显示。
经过排查,发现是target
这里的问题,但target
在其他场景都使用正常;说明是跟target
目标值有关。这时就想到,是不是我在滑动到页面最下方时,target
所指的节点肯定定位不对,要不脱离文档流,要不不存在。因此,我给target
指定节点设置了position:relative
后,问题就解决了。
更多推荐
所有评论(0)