如何在Element UI 對話框裏面加載高德地圖

在Element UI 對話框裏面加載高德地圖的時候發現：被包裹在對話框組件中的地圖沒法顯示，而寫在普通頁面的地圖則沒有這種問題

在普通頁面地圖顯示正常

在彈窗中地圖沒法顯示 咱們能夠看到一樣的代碼，若是不寫在對話框裏，顯示就沒有問題。看了element ui的源碼，終於發現問題的緣由： 能夠看到，對話框裏的內容由此div包裹，而這個div的顯示或隱藏是使用了v-if指令，查閱vue官方文檔，能夠了解到v-if的特性：

這也就是說，當對話框未打開以前，咱們寫在鉤子函數中的初始化地圖的方法雖然執行了，但由於v-if綁定的狀態爲假，實際上地圖並無初始化成功，而當咱們打開對話框，也就是將v-if渲染條件設爲真的時候，mounted方法不會執行，因此對話框裏裝的只是一個沒有通過高德構造函數渲染的普通div，那麼咱們看到的也就只會是一片空白了。

瞭解了緣由，就找到解決辦法了，能夠用watch監測對話框顯示狀態的那個變量

地圖顯示出來了 還有一種方式也能夠加載地圖

將地圖放入一個組件中，在彈窗中引入這個子組件也能夠加載地圖

一樣是經過對話框顯示狀態的那個變量來判斷地圖的加載