element-ui中Dialog使用時整個頁面被添加了遮罩層的問題(添加modal-append-to-body="false")

在使用element-ui中的dialog對話框時,我發現點擊按鈕讓對話框顯示時,它默認是給整個頁面加上了遮罩層的效果,這個其實是不太友好的,我實際想看到的效果是對話框部分不需要遮罩,對話框以外的部分才需要加上遮罩.

 

后來研究了一下它的屬性發現需要給它加上 modal-append-to-body="false" 才能達到我想要的效果.

<el-dialog :modal-append-to-body="false"></el-dialog>