VUE的弹窗中加载canvas的问题

其实是因为弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 open 事件，但这个时候 弹出层 的内容还没有渲染。因为 Vue 组件通过 $emit 触发的事件并不是异步执行的，而是同步执行。弹窗在点击弹出前弹窗里的内容 是没有渲染到dom。

可以使用nextTick方法，将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

import { createApp, nextTick } from 'vue'
const app = createApp({
  setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')
    }
  }
})

如下图所示，initMap为地图绘制