一、问题及解决思路
高德地图在页面中引用能够正常显示,但是想在弹框中显示高德地图并进行操作,却显示为空白......
很奇怪,为什么在页面中能够显示,在对话框里就不能显示了。
首先让弹框一开始就显示,并给地图加载增加了3秒延迟,3秒后地图正常显示。喏,看来是组件初始化的时候容器dom还没渲染,因此需要使用nextTick。
其次查看element ui的源码,会发现 <div class="el-dialog__body" v-if="rendered"><slot></slot></div> ,对话框里的内容由div包裹,而div的显示或隐藏使用了v-if指令。因此上面的问题由于初始时v-if绑定的状态为false因此并没有进行渲染,而当v-if为true时,mounted已经执行完成不会再次执行了。
因此在dialog中使用高德地图需要注意几点:
① 在弹框中显示高德地图,地图加载loadmap不应该在mounted中(只会执行一次),而应该在修改dialog的visible属性为true后的nextTick里调用loadmap。
② 最好把高德地图封装成组件。第三方插件最好都封装成vue component,这样可以保证插件运行时对应容器dom元素一定存在。这样能保证dom存在,但有些初始化时要判断容器宽高的插件在dom不显示时获取不到,所以放在dialog中的组件最好配合v-if使用
二、代码
① 地图组件封装为vue component:
<temp