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

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

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

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

javascript 复制代码
<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有事件可以解决

这里就不过多演示了

javascript 复制代码
  // 监听 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('地图已关闭')
    }
  })
相关推荐
翻滚吧键盘4 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹10 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志12 分钟前
typescript结构化类型应用两例
javascript
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im2 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
西陵2 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构