Question

我正在尝试通过插槽渲染Chart JS画布；

chartWrapper.html

<template>
  <div class="chart-wrapper">
    <slot name="chart"></slot>
  </div>
</template>

chartWrapperContainer.html

<c-chart-wrapper>
    <canvas slot="chart" class="donut" lwc:dom="manual"></canvas>
</c-chart-wrapper>

该图表不会呈现，并且呈现的标记中的画布显示0宽度和高度。没有插槽的渲染效果很好；出于结构原因，我需要将其包装到插槽中。

这可能是什么问题？

Answer 1

或者，您可以设置CSS属性，以通过：host 伪类将Custom Element定义为block或inline-block。（默认情况下，自定义元素的display值设置为inline。）

然后您可以设置其height和width或使用默认值：

<!-- chartWrapper.html -->
<template>
   <style>
      :host {
          display: inline-block ;
          width: 50% ;
          height: 200px ;
      }
   </style>  
   <slot></slot>
</template>

Answer 2

这是通过将画布包裹在div中来解决的；从我的逻辑上讲，不要将普通的“照片”插入内部不知道的插槽中。

<!-- chartWrapper.html -->
<template>
  <div class="chart-wrapper">
    <slot name="chart"></slot>
  </div>
</template>

<!-- chartWrapperContainer.html -->
<c-chart-wrapper>
  <div slot="chart">
    <canvas class="donut" lwc:dom="manual"></canvas>
  </div>
</c-chart-wrapper>

通过Lightning Web Components中的插槽渲染Chart JS

2 个答案: