如何使用 v-if 绘制 Canvas 条件加载？答案

【问题标题】：How can I draw Canvas conditional onload with v-if?如何使用 v-if 绘制 Canvas 条件加载？
【发布时间】：2022-01-17 05:49:57
【问题描述】：

我是 Vue 和 JavaScript 的新手，所以请帮助我理解这个问题：

我想在页面上动态显示加载不同的画布元素。画布的绘制在单独的 script.js 文件中定义。

这是我的一段代码：

<canvas v-if="checkedBoxes.includes('Heart')" onload="drawHeart();" id="heartCanvas" width="300" height="240"></canvas>
<canvas v-if="checkedBoxes.includes('Star')" onload="drawStar();" id="starCanvas" width="240" height="240"></canvas>

script.js:

function drawHeart() {
let heartCanvas = document.getElementById("heartCanvas");
let c = heartCanvas.getContext('2d');
c.beginPath();
... }

但是，当画布元素出现时，它不是由 Javascript 函数 drawXY() 绘制的。在我看来，当元素出现在页面上时不会触发 onload 事件。我也用 Vue 表达式 v-on:load="drawXY" 尝试过，但没有成功。当我将事件触发器更改为onclick 时，它可以工作，但这不是我需要的。

【问题讨论】：

标签： javascript vue.js html5-canvas

【解决方案1】：

所以我终于找到了解决问题的方法！

据我所知，并不是每个 HTML 元素都支持 onload 事件，只有少数几个，例如 <body>, <frame>, <iframe>, <img> ，... 见https://stackoverflow.com/a/42004669

所以我在 canvas 元素之后添加了一个空图像，它在加载图像时执行 drawXY() 函数。

这是更新后的代码：

<template v-if="checkedBoxes.includes('Heart')">
    <canvas id="heartCanvas" width="300" height="240"></canvas>
    <!-- empty image for onload event -->
    <img onload="drawHeart();" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
</template>

<template v-if="checkedBoxes.includes('Star')">
    <canvas id="starCanvas" width="240" height="240"></canvas>
    <!-- empty image for onload event -->
    <img onload="drawStar();" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
</template>

这是我发现的最好的解决方法，因为其他变体（例如在选中复选框后立即执行函数）通常最终无法正常工作，因为 <canvas> 元素尚未呈现，因此，document.getElementById 返回空值。 <script> 标签不允许在 v-if 模板中使用，因为它们可能会产生令人讨厌的副作用。

但如果您有更好的解决方案，请随时分享！

【讨论】：

这里也描述了一个类似的问题：stackoverflow.com/questions/22670482/…