element-ui 的Dialog被蒙板遮住緣由及解決辦法

用 element-ui 時遇到一個問題，彈出的 dialog原本應該在半透明蒙板上層顯示，但不知怎麼跑到了蒙板下面，被遮住了。

查了一些資料，得知若是 Dialog 的外層佈局的 position 值爲 fixed, absolute, relative 三者之一時，就會出現被蒙板遮住的狀況。

解決辦法很簡單，查看 element 的 官方文檔

在 el-dialog 標籤裏添加下面兩行代碼的任意一行：

:modal-append-to-body='false'
 或
 :append-to-body='true'
複製代碼

代碼以下

<el-dialog
    title="登陸"
    :visible.sync="dialogVisible"
    top="20vh"
    width="30%"
    :append-to-body="true">
</el-dialog>
複製代碼