Konvajs 组件加载但画布没有

Question

大家好，我有以下组件，它非常简单，只是在 konva js 网站上加载视频演示代码。我遇到的问题是，当我在 vue 中加载这个组件时，它第一次可以工作，但是如果我将它加载到另一个组件上，画布不会显示出来。

画布组件

    <template>
        <div>
            <div id="canvas-container">
              <button id="play">Play</button><button id="pause">Pause</button>
               <div id="container"></div>
            </div>
        </div>
    </template>
    <script>
mounted: async function(){
      console.log("I mounted canvas");
      var width = 1280;
      var height = 720;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var video = document.createElement('video');
      video.src =
        `/api/files/stock/1080/downloadable/1080.mp4`;

      var image = new Konva.Image({
        image: video,
        draggable: true,
        x: 50,
        y: 20,
      });
      layer.add(image);

      var text = new Konva.Text({
        text: 'Loading video...',
        width: stage.width(),
        height: stage.height(),
        align: 'center',
        verticalAlign: 'middle',
      });
      layer.add(text);

      layer.draw();

      var anim = new Konva.Animation(function () {
        // do nothing, animation just need to update the layer
        console.log("animation called");
      }, layer);

      // update Konva.Image size when meta is loaded
      video.addEventListener('loadedmetadata', function (e) {
        text.text('Press PLAY...');
        image.width(video.videoWidth);
        image.height(video.videoHeight);
      });

      document.getElementById('play').addEventListener('click', function () {
        text.destroy();
        video.play();
        anim.start();
      });
      document.getElementById('pause').addEventListener('click', function () {
        video.pause();
        anim.stop();
      });
    }

}
</script>
<style scoped>
#canvas-container{ 
   max-height: 75vh;
   max-width: 67vw;
  overflow: auto;
  }
</style>

我将该代码包含在以下组件中 托盘台阶

<template>
  <div class="palette-step">
    <div v-if="!selectColors">
      <template v-if="!currentVideo.json">
      <thumbnail/>
      </template>
      <template v-else>
        <p>Holy crap</p>
        <canvas-view/>
       </template>
</div>
</div>
</template>

和文字步骤

<template>
  <div class="text-step">
    <template v-if="this.currentVideo.json && this.dataClay.matrix[0]">
      <canvas-view/>
    </template>
    <template v-else>
      <thumbnail/>
    </template>

我这样称呼这些组件：

<template>
  <div class="wizard">
    <component :is="component"/>
    <controls/>
  </div>
</template> 

<script>
import FileStep from "./Steps/FileStep.vue";
import TextStep from "./Steps/TextStep.vue";
import ImageStep from "./Steps/ImageStep.vue";
import PaletteStep from "./Steps/PaletteStep.vue";
import SubmitStep from "./Steps/SubmitStep.vue";
import Controls from "./Controls.vue";
import SignupStep from "./Steps/SignupStep.vue";


import { mapGetters } from "vuex";

export default {
  components: {
    PaletteStep,
    FileStep,
    TextStep,
    ImageStep,
    SubmitStep,
    Controls,
    SignupStep,
    CanvasView
  },
  props: ["type"],
  computed: {
    ...mapGetters(["currentStepDetails"]),
    component() {
      if (this.type) {
        return this.type + "-step";
      }
    },
    kioskMode() {
      return process.env.VUE_APP_KIOSK_MODE === "offline";
    }
  }
  // Add error in case one of the steps fails to load
};
</script>

<style>
.wizard {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin: 20px auto 0 auto;
}
@media only screen and (max-width: 900px) {
  .wizard {
    margin-top: -15px;
  }
}
@media only screen and (max-width: 1200px) {
  .wizard {
    max-width: 750px;
  }
}
@media only screen and (min-width: 1200px) {
  .wizard {
    max-width: 750px;
  }
}
.instructions {
  width: 100%;
  font-style: italic;
}
</style>

我第一次运行它加载的项目

但如果我前进然后后退或只是前进，它不会加载。然而组件在那里，我的代码运行的挂载函数。画布不显示。我也知道我的情况是否正常，因为神圣废话的出现。

如您所见，当 Konva 内容未加载时，它没有内容 div。为什么是这样？如果我导航到不使用画布视图组件的步骤（组件）然后返回它可以工作。但是，如果我从一个包含 canvas-view 到另一个包含 canvas-view 它不会显示出来。

Answer 1

奇怪的是，当我摆脱过渡组时，它与我的 <transition-group> 有关，它运行良好。不完全确定为什么。