vue中使用vue-signature-pad实现电子签名的效果：包含撤销、清屏、笔刷,橡皮擦，可调节笔刷的大小，保存功能

<template>
  <div id="app">
    <vue-signature-pad
      :width="'100%'"
      :height="'400px'"
      class="signature-pad"
      ref="signaturePad"
    ></vue-signature-pad>
 
    <button @click="undo">撤销</button>
    <button @click="clear">清屏</button>
 
    <!-- 笔刷和橡皮擦的选择 -->
    <button @click="changeBrushColor('red')">红色笔刷</button>
    <button @click="changeBrushColor('green')">绿色笔刷</button>
    <button @click="changeBrushColor('blue')">蓝色笔刷</button>
    <button @click="changeBrushColor('black')">黑色橡皮擦</button>
  </div>
</template>
 
<script>
import VueSignaturePad from 'vue-signature-pad';
 
export default {
  components: { VueSignaturePad },
  methods: {
    // 撤销操作
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    // 清屏操作
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    // 更改笔刷颜色
    changeBrushColor(color) {
      this.$refs.signaturePad.setBrushColor(color);
    }
  }
};
</script>
 
<style>
.signature-pad {
  border: 1px solid #e8e8e8;
  margin-bottom: 10px;
}
</style>

这个代码示例展示了如何在Vue应用中使用vue-signature-pad组件来实现电子签名的功能。包括了撤销、清屏以及更换不同颜色的笔刷的功能。这个示例简洁明了，并且注重于展示核心功能，便于理解和应用。