vue-signature-pad가 모달로 동작하지 않는 이유는 무엇입니까?

vue-signature-pad가 모달로 동작하지 않는 이유는 무엇입니까?

현재 사용하고 있는 라이브러리는 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응답 폼을 확인합니다).

캔버스 초기화 시 대화상자의 폭과 높이가 아직 없기 때문에 이를 해결하기 위해 resizeCanvas 이벤트 호출을 컴포넌트 옵션에 전달할 수 있습니다.

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

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();
})

코드 및 상자 참조.

주의:resizeCanvas공식적인 방법이 아닙니다.

언급URL : https://stackoverflow.com/questions/55718297/why-doesnt-vue-signature-pad-work-in-a-modal