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

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

在普通页面地图显示正常

在弹窗中地图无法显示 我们可以看到同样的代码,如果不写在对话框里,显示就没有问题。看了element ui的源码,终于发现问题的原因: 可以看到,对话框里的内容由此div包裹,而这个div的显示或隐藏是使用了v-if指令,查阅vue官方文档,可以了解到v-if的特性:

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

了解了原因,就找到解决办法了,可以用watch监测对话框显示状态的那个变量

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

将地图放入一个组件中,在弹窗中引入这个子组件也可以加载地图

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

猜你喜欢

转载自juejin.im/post/5b0e4fdb6fb9a009f9489c33
今日推荐