Почему vue-signature-pad не работает в модальном режиме? - PullRequest
Новая
       32

Почему vue-signature-pad не работает в модальном режиме?

0 голосов
/ 17 апреля 2019

В настоящее время я использую следующую библиотеку: 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, чтобы увидеть адаптивную форму).

enter image description here

1 Ответ

2 голосов
/ 17 апреля 2019

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

...