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

在Vue中使用vue-signature-pad实现电子签名的效果，包含撤销、清屏、笔刷和橡皮擦，并且可以调节笔刷的大小以及保存功能，你可以按照以下步骤进行操作：

1. 首先，安装vue-signature-pad插件。可以使用npm或者yarn进行安装：

npm install vue-signature-pad --save

2. main.js 中引用vue-signature-pad插件

import VueSignaturePad from 'vue-signature-pad';
aap.use(VueSignaturePad)

3. 完整的 vue 代码如下

<template>
  <div>
    <el-button
      :icon="EditPen"
      type="primary"
      plain
      @click="dialogVisible = true"
      >手写签批</el-button
    >
    <el-dialog
      v-model="dialogVisible"
      title="手写签批"
      width="30%"
      :before-close="handleClose"
    >
      <vue-signature-pad
        width="100%"
        height="500px"
        ref="signaturePadRef"
        :options="options"
      ></vue-signature-pad>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" size="small" @click="undo">撤销</el-button>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 20px"
            @click="clear"
            >清屏</el-button
          >
          <el-button :icon="EditPen" size="small" @click="pencil"> </el-button>
          <el-button :icon="EditPen" size="small" @click="eraser"> </el-button>
          <div class="otherSet">
            <div class="penTxt">笔刷大小：</div>
            <div
              class="circleWrap"
              v-for="(item, index) in penSize"
              :key="index"
              :class="{ active: isActive === index + 1 }"
              @click="selSize(item)"
            >
              <b :class="item === 1 ? 'b1' : item === 2 ? 'b2' : 'b3'"></b>
            </div>
          </div>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 20px"
            @click="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { EditPen } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { ref } from "vue";
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const signaturePadRef = ref();
const pencilSize = ref(1);
const options = ref({
  penColor: "#000",
  minWidth: 1, //控制画笔最小宽度
  maxWidth: 1, //控制画笔最大宽度
});
const penSize = ref([1, 2, 3]);
const isActive = ref(1);

//撤销
const undo = () => {
  signaturePadRef.value.undoSignature();
};
//清除
const clear = () => {
  signaturePadRef.value.clearSignature();
};
//橡皮擦
const eraser = () => {
  options.value = {
    penColor: "#fff",
    minWidth: 5, //这里可以赋值  this.pencilSize
    maxWidth: 5,
  };
};

//笔刷
const pencil = () => {
  options.value = {
    penColor: "#5492ab",
    minWidth: pencilSize.value, //这里可以赋值  this.pencilSize
    maxWidth: pencilSize.value,
  };
};

const selSize = (val: any) => {
  isActive.value = val;
  pencilSize.value = val;
  options.value = {
    penColor: "#000",
    minWidth: val,
    maxWidth: val,
  };
};
const save = () => {
  const signatureData = signaturePadRef.value.saveSignature();
  // 在这里处理保存签名的逻辑
  console.log(signatureData);
  dialogVisible.value = false;
};
</script>
<style scoped lang="scss">
.dialog-footer {
  padding-top: 20px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .otherSet {
    width: 40%;
    display: flex;
    align-items: center;
    .b1 {
      width: 4px;
      height: 4px;
    }
    .b2 {
      width: 6px;
      height: 6px;
    }
    .b3 {
      width: 8px;
      height: 8px;
    }
    .b1,
    .b2,
    .b3 {
      display: inline-block;
      background: #000;
      border-radius: 50%;
    }
    .active {
      border: 1px dashed #0074d9;
    }
    .circleWrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 18px;
      height: 18px;
      cursor: pointer;
      margin-right: 20px;
    }
    .penTxt {
      width: 70px;
      font-size: 12px;
      color: #000;
    }
  }
}
</style>

此插件还有两个内置的方法比较有用，就是 “锁定目标签名板” 和“打开目标签名板

signaturePadRef.value.lockSignaturePad(); //锁定目标签名板
signaturePadRef.value.openSignaturePad(); //打开目标签名板