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('地图已关闭')
    }
  })
相关推荐
zhanshuo31 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥32 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil34 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的8 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络10 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘10 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way10 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家10 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj16899711 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode