Как использовать signature_pad в laravel 5.4?

Я работаю над простым веб-приложением для выставления счетов / квитанций на основе форм, которое требует получения подписи клиента с помощью signature_pad. Мое приложение использует Laravel 5.4 из-за фамильярности и встроенной системы аутентификации пользователей.

В качестве подтверждения концепции я безуспешно пытался внедрить код из примера signature_pad в свой шаблон Blade - рисование не происходит. Кроме того, действия / прослушиватели событий, связанные с кнопками, также не работают.

Непосредственная вариация кода в html-файле приводит к функционалу signature_pad (см. Ниже), поэтому я знаю, что написанный код работает нормально - похоже, проблема связана с Laravel, Vue, Blade или с тем, как JS обрабатывается внутри. шаблона.

Мы ценим любое понимание или опыт использования signature_pad в шаблоне blade-сервера в Laravel 5.4 или аналогичном. Спасибо.

<!DOCTYPE html>
<html>
 <head>
  <title>Testing</title>
 </head>

 
 <body>
  <div class="wrapper">
         <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
     </div>
     <div>
         <button id="save">Save</button>
         <button id="clear">Clear</button>
     </div>
 </body>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>


 <script>
  var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
    backgroundColor: 'rgba(255, 255, 255, 0)',
    penColor: 'rgb(0, 0, 0)'
  });
  var saveButton = document.getElementById('save');
  var cancelButton = document.getElementById('clear');

  saveButton.addEventListener('click', function (event) {
    var data = signaturePad.toDataURL('image/png');

  // Send data to server instead...
    window.open(data);
  });

  cancelButton.addEventListener('click', function (event) {
    signaturePad.clear();
  });


 </script>

</html>

Источник

1 ответ

Проблема возникает из шаблона шаблона, созданного Laravel из коробки. По умолчанию макет шаблона (views/layouts/app.blade.php) поставляется с тегом сценария для app.js из-за привязки Vue2.0, я полагаю. Удаление этого вызова полностью позволяет JS signature_pad работать.

Источник
Другие вопросы по тегам