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

憨憨404

已于 2024-05-23 17:27:30 修改

阅读量386

点赞数 2

分类专栏： vue项目文章标签： vue.js javascript elementui

于 2024-05-15 10:42:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_60839348/article/details/138898560

版权

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

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

<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>
      &