vue3的组件执行问题？

Question

下面的代码直接打开这个页面执行没有问题，但是做为组件放到Dialog里被另一个页面执行，打开是图片就无放显示，有大神能看出是哪里问题吗？

<script setup lang="tsx">
import Canvas from '@/views/Test/Canvas.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { onMounted, ref } from 'vue'
import { fabric } from 'fabric'
const imgUrl = ref('https://www.chunten.com/angpu/a1.jpg')
const canvasAll = ref<HTMLDivElement | null>(null)
let canvas: fabric.Canvas | null = null
onMounted(() => {
  console.log('SetImage的onMounted执行了')
  if (canvasAll.value) {
    canvas = new fabric.Canvas('canvas2')
    loadImg(imgUrl.value)
  }
})
const loadImg = (url) => {
  console.log('loadImg执行了。。。')
  console.log(canvasAll.value)
  if (canvasAll.value) {
    canvas!.setWidth(canvasAll.value.$el.offsetWidth)
    canvas!.setHeight(800)
  }
  fabric.Image.fromURL(url, (img) => {
    img.left = 0
    img.top = 10
    canvas!.clear()
    canvas!.add(img)
    canvas?.zoomToPoint({ x: 0, y: 0 }, 1)
    canvas!.renderAll()
  })
}
</script>

<template>
  <ContentWrap ref="canvasAll">
    <canvas id="canvas2"></canvas>
  </ContentWrap>
</template>

<style scoped lang="less">
.all {
  width: 100%;
  height: 700px;
  background: #0f2438;
}
</style>

Answer 1

怀疑是样式 width：100% 导致的