4

我目前正在使用以下库:https ://www.npmjs.com/package/vue-signature-pad ,其中包含以下示例:https ://codesandbox.io/s/n5qjp3oqv4

我将它作为示例应用,但我在模态中使用它:

<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>

如果我在模态之外使用它,它可以正常工作;但是在模态中,要使其工作,我必须修改屏幕的大小(例如,通过使用 DevTools'Toggle device toolbar来查看响应式表单)。

在此处输入图像描述

4

2 回答 2

16

这是由于对话框在画布初始化时还没有宽度和高度,要解决它,您可以将 resizeCanvas 事件调用传递给组件的选项:

<VueSignaturePad
    id="signature"
    width="100%"
    height="200px"
    ref="signaturePad"
    :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
/>
于 2019-10-03T10:27:17.207 回答
5

打开 DevTools 并查看canvas元素。首先,您会看到它的宽度和高度(不是宽度和高度样式)设置为0然后调整窗口大小,您将看到宽度和高度更改为某些值并且它可以工作。

VueSignaturePad.js。看resizeCanvas方法

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

何时v-dialog挂载,然后VueSignaturePad挂载。resizeCanvasis 调用一次,此时mounted画布以某种方式没有宽度和高度(由于其父级),因此它将这些值设置为0. 调整窗口大小后,它将再次调用并更新这些值。

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

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

请参阅代码框

注意:这resizeCanvas不是官方的方法。

于 2019-04-17T11:32:07.017 回答