鍍金池/ 問(wèn)答/HTML/ vue如何在組件內(nèi)部做整個(gè)頁(yè)面的遮罩層？

vue如何在組件內(nèi)部做整個(gè)頁(yè)面的遮罩層？

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

組件litter中包含三個(gè)組件，且litter也只是整個(gè)頁(yè)面的一個(gè)組件，如何在組件a中建立一個(gè)可以遮罩整個(gè)頁(yè)面的遮罩層？
最開(kāi)始想的辦法是整個(gè)在最外層寫遮罩層內(nèi)部傳是否顯示的布爾值給他 但是頁(yè)面結(jié)構(gòu)比較復(fù)雜，傳值的話很麻煩
后來(lái)在a中寫遮罩層掛載在body上，就可以寫出全局遮罩。
除了傳值和掛載到body還有什么方式可以實(shí)現(xiàn)在組件內(nèi)寫整個(gè)頁(yè)面的遮罩呢？

回答
編輯回答
厭遇

1.如果是用的element-ui的插件可以使用下面這種方式設(shè)置遮罩層,'#ark-per-table'指的是覆蓋的盒子大小,text是遮罩層顯示的文字

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

2.如果沒(méi)有用element可以使用vuex來(lái)傳值,vuex的詳細(xì)使用可以參照這個(gè)文章請(qǐng)戳這里
3.希望可以幫到你

2017年1月28日 04:21
編輯回答
不二心

1.掛載在body上組件的屬性也是可以從a里面讀取的，你不要設(shè)置scoped

2017年11月25日 00:39
編輯回答
淺淺

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

2018年8月11日 14:31