vue如何在组件内部做整个页面的遮罩层？

Question

<div >
      <a></a>
      <b></b>
      <c></c>
 </div> 

组件litter中包含三个组件，且litter也只是整个页面的一个组件，如何在组件a中建立一个可以遮罩整个页面的遮罩层？
最开始想的办法是整个在最外层写遮罩层内部传是否显示的布尔值给他 但是页面结构比较复杂，传值的话很麻烦
后来在a中写遮罩层挂载在body上，就可以写出全局遮罩。
除了传值和挂载到body还有什么方式可以实现在组件内写整个页面的遮罩呢？

Answer 1

1.挂载在body上组件的属性也是可以从a里面读取的，你不要设置scoped

Answer 2

1.如果是用的element-ui的插件可以使用下面这种方式设置遮罩层,'#ark-per-table'指的是覆盖的盒子大小,text是遮罩层显示的文字

const loading = Loading.service({ target: '#ark-per-table', text: '加载中' })

2.如果没有用element可以使用vuex来传值,vuex的详细使用可以参照这个文章请戳这里
3.希望可以帮到你

Answer 3

直接在body下写遮罩，然后methods document.getElementById('id').style.display = 'block'

Answer 4

import { Loading } from 'element-ui'

const options = {

fullscreen: true,

lock: true,

background: 'rgba(0, 0, 0, 0.7)',

text: '加载中...'

}

let loadingInstance

export const loading = {

start: () => {

loadingInstance = Loading.service(options)

},

stop: () => {

loadingInstance && loadingInstance.close()

}

}

export default loading