Vue.js 为什么'；t vue在模态中的签名填充工作？

我目前正在使用以下库：其中包含以下示例：

我以它为例，但我有一个模式：

<v-dialog v-model="canvasVehiculo" fullscreen hide-overlay transition="dialog-bottom-transition">
         <v-card>
         <v-toolbar dark color="primary">
         <v-btn icon dark @click="canvasVehiculo = false">
          <v-icon>close</v-icon>
         </v-btn>
         <v-toolbar-title>Seleccionar partes del vehiculo:</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
            <v-btn dark flat @click="undo">Deshacer</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-list three-line subheader>
        <v-subheader></v-subheader>            
        <VueSignaturePad
         id="signature"
         width="100%"
         height="450px"
         ref="signaturePad"
        />
   </v-list>
 </v-card>

<script>
import VueSignature from 'vue-signature-pad'; //Unicamente lo importo
</script>
<style scoped>
#signature {
  border: double 3px transparent;
  border-radius: 5px;
  background-image: url('imagen.png');
  background-size: 900px 456px; 
  background-position: center;
  background-origin: border-box;
  background-clip: content-box, border-box;
}
</style>

关闭
车辆选择部分：
德沙彻
从“vue签名板”导入VueSignature//安普托联合酒店
#签名{
边框：双3px透明；
边界半径：5px；
背景图片：url（'imagen.png'）；
背景尺寸：900px456px；
背景位置：中心；
背景来源：边框框；
背景剪辑：内容框、边框框；
}

如果我在模态之外使用它，它工作正常；但是在模态中，为了使它工作，我必须修改屏幕的大小 （例如，使用DevTools的切换设备工具栏查看响应表单）

---

打开DevTools并查看

画布

元素。首先，您将看到它的宽度和高度（而不是宽度和高度样式）设置为

0

，然后调整窗口大小，您将看到宽度和高度更改为某些值，并且可以正常工作

在。查看

resizeCanvas

方法

canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;

安装

v-dialog

后，安装

VueSignaturePad

时。

resizeCanvas

在

mounted

时被调用一次，此时画布没有宽度和高度（由于其父画布），因此它将这些值设置为

0

。调整窗口大小后，它将再次调用并更新这些值

解决此问题的一种方法是在其父级完成渲染后调用

resizeCanvas

this.$nextTick(() => {
  this.$refs.signaturePad.resizeCanvas();
})

看

---

注意：

resizeCanvas

不是官方方法。

这是因为当画布在其中初始化时对话框还没有宽度和高度，要解决这个问题，您可以将resizeCanvas事件调用传递给组件的选项：

<VueSignaturePad
    id="signature"
    width="100%"
    height="200px"
    ref="signaturePad"
    :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
/>

IMO应将此标记为答案，更好的练习此标记为正确答案！谢谢@eselskas