Javascript 初始化和函數實現到 Vue 組件中

Question

我正在嘗試復制@szimek 的簽名板...

我總是對如何將純 JavaScript 函數和初始化（如下面的代碼所示）實現為 Vue 組件感到困惑。

我是 Web 開發的新手，我知道我的問題很愚蠢，但我希望你能容忍我:)

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

 .wrapper { position: relative; width: 400px; height: 200px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } img { position: absolute; left: 0; top: 0; }.signature-pad { position: absolute; left: 0; top: 0; width:400px; height:200px; }

 <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script> <h1> Draw over image </h1> <div class="wrapper"> <img src="https://preview.ibb.co/jnW4Qz/Grumpy_Cat_920x584.jpg" width=400 height=200 /> <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>

Answer 1

不要使用<script> ，它在 Vue 組件模板中沒用，而是像 package 一樣使用它， import SignaturePad from 'signature_pad' 。

初始化代碼轉到created或mounted鈎子。

如果可能，在 Vue 中不應該直接訪問 DOM。 如果需要這樣做，則需要使用 refs 代替。 可以在模板中設置事件處理程序：

<div class="wrapper">
  <canvas ref="padRef" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button @click="save">Save</button>
  <button @click="clear">Clear</button>
</div>

與遺留 JS 不同，組件應該在某個時候被銷毀。 需要進行適當的清理。 它可以是這樣的：

mounted() {
  this.signaturePad = new SignaturePad(this.$refs.refPad, ...);
}
destroyed() {
  // some cleanup
  this.signaturePad.off();
},
methods: {
  save() {
    var data = this.signaturePad.toDataURL('image/png');
    ...
  },
  clear() {
    this.signaturePad.clear();
  }
}