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>
複製程式碼