javascript - 为每个 Vue.JS 模板循环初始化 Canvas

Question

我一直在尝试找出如何为每个所需的循环/签名初始化本地“signaturePad” Canvas 。

我也热衷于将“dataURL”绑定(bind)到signaturePad.toDataURL(“image/jpg”)。 IE。显示输入的每个签名的 dataURI。

希望对您有帮助!这也是 JSfiddle:https://jsfiddle.net/kaihendry/kt53sa2r/1/

// var canvas = document.querySelector("canvas");
// var signaturePad = new SignaturePad(canvas);
// var wrapper = document.getElementById("signature-pad");

// How do I initialise signaturePad for every signatureNeeded?

new Vue({
  el: "#app",
  data: {
    signaturesNeeded: 2,
  },
  methods: {
    submitForm: function(x) {
      fetch('/echo/html', {
          method: 'POST',
          body: new FormData(x.target)
        })
        .then(() => {
          var button = document.getElementById("button")
          button.innerText = 'Sent!'
        })
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div id="app">
  <label>Number of signatures required
<input type=number v-model.number="signaturesNeeded">
</label>
  <form id="myForm" v-on:submit.prevent="submitForm">
    <template v-for="item in signaturesNeeded">
    
<div class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
</div>
    
<input required type=text size=80 placeholder="Name" name=name>
<input required type=text size=80 name=dataURL>

</template>

    <button class="button" id="button" type="submit">Sign</button>
  </form>
  <a href="https://github.com/szimek/signature_pad">Signature pad sources</a>
</div>

Answer 1

您可以定义自定义组件(例如signature-pad)并在那里初始化SignaturePad。我在下面创建了工作片段。当用户停止写入时，它还会更新签名数据 url(它显示在 Canvas 下方)，并且作为示例，所有 url 均由父组件收集。检查一下:

Vue.component('signature-pad', {
    template: '#signaturepad',
    data() {
        return {
            signaturePad: null,
            dataUrl: null
        }
    },
    mounted() {
        this.signaturePad = new SignaturePad(this.$refs.canv, {
           onEnd: () => { 
               this.dataUrl = this.signaturePad.toDataURL();
               // as example collect all url in parent
               this.$emit('update', this.dataUrl)
           }
        });
    }
});

new Vue({
  el: "#app",
     data: {
    signaturesNeeded: 2,
    // all signature urls as example
    signatureDataUris: []
  },
      methods: {
    submitForm: function (x) {
        fetch('/echo/html', { method: 'POST',
            body: new FormData(x.target) })
        .then(() => {
            var button = document.getElementById("button")
            button.innerText = 'Sent!'
        })
    },
    
    updateSignature(index, url) {
       Vue.set(this.signatureDataUris, index, url);
       console.log(this.signatureDataUris);
    }
    }
})

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <label>Number of signatures required
<input type=number v-model.number="signaturesNeeded">
</label>
  <form id="myForm" v-on:submit.prevent="submitForm">
    <template v-for="item in signaturesNeeded">
    
<signature-pad @update="(val) => updateSignature(item-1, val)" ></signature-pad>

<input required type=text size=80 placeholder="Name" name=name>
</template>
    <button class="button" id="button" type="submit">Sign</button>
  </form>
  <a href="https://github.com/szimek/signature_pad">Signature pad sources</a>
</div>


<script type='text/x-template' id="signaturepad">
	<div class="signature-pad">
    <div class="signature-pad--body">
    	<canvas ref="canv"></canvas>
      <div>{{dataUrl}}</div>
    </div>
    <div class="signature-pad--footer">
    	<div class="description">Sign above</div>
   </div>
</div>
</script>