element-ui v-loading指令使用在组件顶层元素的时候会fullscreen触发

Question

如标题所诉，该如何解决？

<template>

    <div v-loading="loading"> </div>

</template>

就像这样写，如果这个组件挂载在其他组件下，会导致全屏的loading触发。

官网并没有对这个现象有所解释，如果写在template下的顶层元素上的话，就不会触发全屏loading

<template>

    <div> 

        <section v-loading="loading"></section>

    </div>

</template>

这样写就不会触发。

Answer 1

"官网并没有对这个现象有所解释，如果写在template下的顶层元素上的话，就不会触发全屏loading"  - 你是不是说反了

Answer 2

.el-loading-mask {&nbsp; position: absolute;&nbsp; z-index: 10000;&nbsp; background-color: rgba(255, 255, 255, .9);&nbsp; margin: 0;&nbsp; top: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; transition: opacity .3s}loading的遮罩是受div的面积控制的，如果div面积为空，则受最上position为 relative 的元素所限定，如果一直向上找不到，则是 body。你试着给div限制宽高，应该就不会出现这个问题了