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 {

  position: absolute;

  z-index: 10000;

  background-color: rgba(255, 255, 255, .9);

  margin: 0;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  transition: opacity .3s

}

loading的遮罩是受div的面积控制的，如果div面积为空，则受最上position为 relative 的元素所限定，如果一直向上找不到，则是 body。你试着给div限制宽高，应该就不会出现这个问题了