I am currently using the following library: https://www.npmjs.com/package/vue-signature-pad which has the following example: https://codesandbox.io/s/n5qjp3oqv4
I am applying it as the example, but I have it in a modal:
<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>
If I use it outside of the modal, it works correctly; but in the modal, to make it work, I must modify the size of the screen
(for example, by using the DevTools' Toggle device toolbar
to see the responsive form).
答案 0 :(得分:2)
打开DevTools并查看canvas
元素。首先,您会看到其宽度和高度(不是宽度和高度样式)设置为0
,然后调整窗口大小,您会看到宽度和高度被更改为某些值并且可以正常工作。
在VueSignaturePad.js。看一下resizeCanvas
方法
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
在安装v-dialog
之后再安装VueSignaturePad
时。 resizeCanvas
在mounted
被调用一次,并且此时画布以某种方式没有宽度和高度(由于其父级),因此将这些值设置为0
。调整窗口大小后,它将再次调用并更新这些值。
解决此问题的一种方法是在父项完成渲染后调用resizeCanvas
。
this.$nextTick(() => {
this.$refs.signaturePad.resizeCanvas();
})
请参见codesandbox。
注意:resizeCanvas
不是官方方法。
答案 1 :(得分:1)
由于对话框没有宽度和高度,这是由于画布在其中进行初始化时要解决的,您可以将resizeCanvas事件调用传递给组件的选项:
<VueSignaturePad
id="signature"
width="100%"
height="200px"
ref="signaturePad"
:options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
/>