import { Loading } from 'element-ui'
Vue.prototype.$loading = Loading.service
<div class="loadingBox" ref="box" v-show="isLoading"></div>
this.loading = this.$loading({
target: this.$refs.box,
text: '系统处理中',
background: 'transparent'
})
this.isLoading = true
const { code, result } = await applyMakeOut(params)
this.isLoading = false
this.loading.close()
<style>
.box{
// 这里需要给局部加载loading的地方添加相对定位
.loadingBox{
position: relative;
}
}
<style>
这里的重点其实是需要给局部加载的元素添加相对定位,因为初次加载不会出现问题,但是当你把网速放慢,频繁获取数据时就会出现loading定位不准的情况,通常是被定位到了自己的上层有定位的父元素(绝对定位的知识)