konvajs 和 高德地图 在vue2 dialog弹框中使用

konvajs 在 element dialog弹框中, 弹框加载出来, konvajs => canvas 却没有加载出来

原因: konvajs在普通页面上可以直接加载, 在弹框中, 想要加载出来, 则需要使用 dialog的两个事件, 打开弹框后调用和,离开弹框调用

    <!-- 详情:  @opened="onDialogOpened" dialog弹框打开后才会执行,避免konvajs未加载, @closed="onDialogClosed" 重置 -->

<template>
    <div>
      <el-button @click="openDialog">打开弹框</el-button>
      <!-- 详情  @opened="onDialogOpened" dialog弹框打开后才会执行,避免konvajs未加载, @closed="onDialogClosed" 重置 -->
      <el-dialog v-model:visible="dialogVisible" title="KonvaJS 弹框示例" width="50%" @opened="onDialogOpened">
        <div>
          <div ref="container" style="width: 500px; height: 500px;"></div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Konva from 'konva';
  
  export default {
    data() {
      return {
        dialogVisible: false,
        stage: null
      };
    },
    methods: {
      openDialog() {
        this.dialogVisible = true;
      },
  
      createKonvaStage() {
        const container = this.$refs.container;
        if (container) {
          this.stage = new Konva.Stage({
            container: container,
            width: 300,
            height: 300
          });
  
          const layer = new Konva.Layer();
          const rect = new Konva.Rect({
            x: 50,
            y: 50,
            width: 100,
            height: 100,
            fill: 'red',
            draggable: true
          });
  
          layer.add(rect);
          this.stage.add(layer);
        }
      },
  
      onDialogOpened() {
        this.createKonvaStage();
      }
    }
  };
  </script>
  
  <style scoped>
  /* 添加样式以适应您的需求 */
  </style>

高德地图也是如此 (父传递子组件,子监听),不过我高德地图用的是监听解决的, 后边konvajs发现dialog有事件可以解决

这里就不过多演示了

  // 监听 map地图 的变化, dialog中
  watch(dialogVisible, (newValue) => {
    if (newValue === true) {
      mapFun()
    } else {
      showInputCircle.value = false // 默认隐藏
      // console.log(showInputCircle.value);
  
      path.value = [] // 多边形编辑
      inputCircleValue.value = 1000 // 圆 半径
      // lng.value = '' // 圆 经度
      // lat.value = '' // 圆 维度
      // const lng = ref('113.625317') //经度 默认
      // const lat = ref('34.746308') //维度 默认
  
      map?.destroy()
      // console.log('地图已关闭')
    }
  })