Question

我坚持尝试找出如何为每个所需的循环/签名初始化本地“ signaturePad”画布。

我也很想将“ dataURL”绑定到signaturePad.toDataURL（“ image / jpg”）。即显示输入的每个签名的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（显示在画布下方），例如，所有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>

为每个Vue.JS模板循环初始化画布

1 个答案: