Почему 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>

Если я использую его вне модального окна, он работает правильно; но в модальном режиме, чтобы заставить его работать, я должен изменить размер экрана (например, с помощью Toggle device toolbar DevTools, чтобы увидеть отзывчивую форму).

введите здесь описание изображения


vue.js vuejs2 signaturepad
person JG_GJ    schedule 17.04.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Откройте 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 не является официальным методом.

person User 28    schedule 17.04.2019

arrow_upward
10
arrow_downward

Это связано с тем, что диалоговое окно еще не имеет ширины и высоты, когда холст инициализируется внутри него, чтобы решить эту проблему, вы можете передать вызов события resizeCanvas параметрам компонента:

<VueSignaturePad
    id="signature"
    width="100%"
    height="200px"
    ref="signaturePad"
    :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
/>
person eselskas    schedule 03.10.2019
comment
ИМО это должно быть помечено как ответ, лучшая практика - person Andor Németh; 18.11.2019
comment
Это должно быть отмечено, являются правильным ответом! Спасибо @eselskas - person Emeka Mbah; 08.06.2021