Javascript初始化和函数在Vue组件中的实现

我正试图复制签名本

我总是对如何在Vue组件中实现纯JavaScript函数和初始化（如下面的代码所示）感到困惑

我是网络开发新手，我知道我的问题很傻，但我希望你能容忍我：）

var signaturePad=new signaturePad（document.getElementById（'signature-pad'）{
背景颜色：“rgba（255，255，255，0）”，
铅笔颜色：“rgb（0,0,0）”
});
var saveButton=document.getElementById（'save'）；
var cancelButton=document.getElementById（'clear'）；
saveButton.addEventListener（'click'，函数（事件）{
var data=signaturePad.toDataURL（'image/png'）；
//将数据发送到服务器。。。
窗口。打开（数据）；
});
cancelButton.addEventListener（'click'，函数（事件）{
signaturePad.clear（）；
});
.wrapper{
位置：相对位置；
宽度：400px；
高度：200px；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
img{
位置：绝对位置；
左：0；
排名：0；
}
.签名本{
位置：绝对位置；
左：0；
排名：0；
宽度：400px；
高度：200px；
}

画图
拯救
清楚的
不要使用
，它在Vue组件模板中毫无用处，而是像包一样使用，
从“签名板”导入签名pad

初始化代码转到
已创建
或
已安装
挂钩

如果可能，不应在Vue中直接访问DOM。如果需要这样做，则需要使用REF。可以在模板中设置事件处理程序：

<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>

谢谢老兄，我之前也这么做了，但我不知道为什么不行：P，谢谢。顺便问一下，是否可以将图像添加到画布？我想要一份文件的软拷贝并在上面签名。不客气。我自己不用这个包裹。signaturePad.fromDataURL可能会满足您的要求。
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();
  }
}