如何在Element UI 对话框里面加载高德地图

在Element UI 对话框里面加载高德地图的时候发现：被包裹在对话框组件中的地图没法显示，而写在普通页面的地图则没有这种问题

在普通页面地图显示正常

在弹窗中地图没法显示 咱们能够看到一样的代码，若是不写在对话框里，显示就没有问题。看了element ui的源码，终于发现问题的缘由： 能够看到，对话框里的内容由此div包裹，而这个div的显示或隐藏是使用了v-if指令，查阅vue官方文档，能够了解到v-if的特性：

这也就是说，当对话框未打开以前，咱们写在钩子函数中的初始化地图的方法虽然执行了，但由于v-if绑定的状态为假，实际上地图并无初始化成功，而当咱们打开对话框，也就是将v-if渲染条件设为真的时候，mounted方法不会执行，因此对话框里装的只是一个没有通过高德构造函数渲染的普通div，那么咱们看到的也就只会是一片空白了。

了解了缘由，就找到解决办法了，能够用watch监测对话框显示状态的那个变量

地图显示出来了 还有一种方式也能够加载地图

将地图放入一个组件中，在弹窗中引入这个子组件也能够加载地图

一样是经过对话框显示状态的那个变量来判断地图的加载