vue-signature-pad实现电子签名

1、安装 vue-signature-pad

如果项目中用的是 vue2 的版本，那么安装 2.0.5版本：

npm install --save vue-signature-pad@2.0.5

如果项目中用的是 vue3 版本，那么安装最新的版本即可：

npm install --save vue-signature-pad

或者package.json直接引入下载，安装更新node包命令 npm i

"vue-signature-pad": "^2.0.5"

2、 main.js 中引用 vue-signature-pad 

// 电子签名
import VueSignaturePad from "vue-signature-pad";
Vue.use(VueSignaturePad);

// elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、简洁版实现代码如下：

<template>
  <div>
    <vue-signature-pad style="border: 1px solid #333;" ref="signaturePad" v-model="signature"></vue-signature-pad>
    <button @click="undoSignature">撤销</button>
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      signature: null,
    };
  },
  methods: {
    // 撤销上一步
    undoSignature() {
      this.$nextTick(() => {
        this.$refs.signaturePad.undoSignature();
      });
    },
    // 清除
    clear() {
      this.$nextTick(() => {
        this.$refs.signaturePad.clearSignature();
      });
    },
    // 保存
    save() {
      this.$nextTick(() => {
        const signatureData = this.$refs.signaturePad.saveSignature();
        console.log(signatureData);
      });
    },
  },
};
</script>

4、完整版实现代码如下：

<template>
  <div class="handwritten-name-wrap">
    <div class="img-wrap">
      <img :src="imgSrc" alt="" v-if="imgSrc">
    </div>
    <div class="signWrap">
      <vue-signature-pad style="border: 1px solid #333;" width="100%" height="100%" :options="options"
        ref="signaturePad"></vue-signature-pad>
      <footer>
        <div class="gtnGroup">
          <el-button type="primary" size="mini" @click="undo">撤销</el-button>
          <el-button type="primary" size="mini" style="margin-left:20px" @click="clear">清屏</el-button>
          <el-button type="primary" size="mini" style="margin-left:20px" @click="save">保存</el-button>
        </div>
        <div class="otherSet">
          <div class="penTxt">笔刷大小：</div>
          <div class="circleWrap" :class="{ active: isActive1 }" @click="selSize(1)"><b class="b1"></b></div>
          <div class="circleWrap" :class="{ active: isActive2 }" @click="selSize(2)"><b class="b2"></b></div>
          <div class="circleWrap" :class="{ active: isActive3 }" @click="selSize(3)"><b class="b3"></b></div>
        </div>
      </footer>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      panelVisible: false,
      panelTitle: "",
      options: {
        penColor: "#000",
        minWidth: 1,    //控制画笔最小宽度
        maxWidth: 1,    //控制画笔最大宽度
      },
      isActive1: true,
      isActive2: false,
      isActive3: false,
      imgSrc: "",
    }
  },
  methods: {
    //手写签名按钮的点击
    handleClick() {
      this.panelVisible = true;
      this.isActive1 = true;
      this.isActive2 = false;
      this.isActive3 = false;
      this.options = {
        penColor: "#000",
        minWidth: 1,
        maxWidth: 1,
      }
    },
    //撤销
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    //清除
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    //保存
    save() {
      console.log(this.$refs.signaturePad.saveSignature());
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      this.imgSrc = data;
      this.panelVisible = false;
    },
    //调节画笔粗细大小
    selSize(val) {
      this.options = {
        penColor: "#000",
        minWidth: val,
        maxWidth: val,
      };
      if (val == 1) {
        this.isActive1 = true;
        this.isActive2 = false;
        this.isActive3 = false;
      } else if (val == 2) {
        this.isActive1 = false;
        this.isActive2 = true;
        this.isActive3 = false;
      } else if (val == 3) {
        this.isActive1 = false;
        this.isActive2 = false;
        this.isActive3 = true;
      }
    }
  },
}
</script>
<style lang="scss">
.handwritten-name-wrap {
  .img-wrap {
    width: 100%;
    height: 164px;
    margin-top: 2px;
    border: 1px solid #ccc;

    img {
      width: 70%;
      height: 100%;
    }
  }

  .signWrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .signName {
      flex: 1;
      border-top: 1px solid #ccc;
    }

    footer {
      height: 40px;
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .gtnGroup {
        width: 50%;
        margin-left: 20px;
      }

      .otherSet {
        width: 50%;
        display: flex;
        align-items: center;

        .penTxt {
          width: 100px;
        }

        .selSize {
          width: 70px;
        }

        .el-select__caret {
          position: absolute;
          right: -3px;
        }

        .b1,
        .b2,
        .b3 {
          display: inline-block;
          background: #000;
          border-radius: 50%;
        }

        .circleWrap {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 18px;
          height: 18px;
          cursor: pointer;
          margin-right: 20px;
        }

        .active {
          border: 1px dashed #0074d9;
        }

        .b1 {
          width: 4px;
          height: 4px
        }

        .b2 {
          width: 6px;
          height: 6px
        }

        .b3 {
          width: 8px;
          height: 8px
        }
      }
    }
  }
}

.signNameModel {
  .vxe-modal--content {
    padding: 0 !important;
  }
}
</style>

实现效果如下：

 此插件还有两个内置的方法比较有用，就是 “锁定目标签名板” 和“打开目标签名板”，其实就是禁用签名和启用签名。项目中有些审批是需要走流程的，到某个节点的时候，某个人可能没有没有权限签名，只能查看签名，这时候这两个方法就排上用场了。以此篇博文为例，具体用应用方法如下：

this.$refs.signaturePad.lockSignaturePad(); //锁定目标签名板
this.$refs.signaturePad.openSignaturePad(); //打开目标签名板