下载插件

You can install the latest release using npm:

npm install --save signature_pad

or Yarn:

yarn add signature_pad

You can also add it directly to your page using <script> tag:

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

git地址：signature_pad

创建.vue文件

<template>

  <div v-loading="loading">

    <div>

      <div>

        <canvas />

      </div>

    </div>

    <div>

      <el-button type="danger" @click="click_del">重新签名</el-button>

      <el-button type="primary" @click="click_submit">确认签名</el-button>

    </div>

  </div>

</template>

<script>

import {onMounted, reactive, toRefs} from 'vue';

import SignaturePad from 'signature_pad';

export default {

  props: {

    signatureObj: {

      type: Object,

      default: () => {

        return {

          height: 240,

          width: 460,

        };

      },

    },

  },

  setup(props) {

    const data = reactive({

      signaturePad: null, // 存放竖屏SignaturePad对象

      signature_value: null,

      loading: false,

    });

    // 初始化画板

    function init() {

      let canvas = document.querySelector('.canvas');

      data.signaturePad = new SignaturePad(canvas, {

        minWidth: 2,

        maxWidth: 2,

        penColor: 'rgb(0, 0, 0)',

      });

      // 画板高度

      canvas.height = props.signatureObj.height;

      // 画板宽度

      canvas.width = document.body.clientWidth - props.signatureObj.width;

    }

    // 清除画板

    function click_del() {

      data.signaturePad.clear();

    }

    // 确认画板

    function click_submit() {

      data.signature_value = data.signaturePad.toDataURL();

      data.loading = true;

      setTimeout(() => {

        data.loading = false;

        data.signaturePad.clear();

      }, 1000);

    }

    onMounted(() => {

      init();

    });

    return {...toRefs(data), click_del, click_submit};

  },

};

</script>

创建css

<style scoped>

.signature {

  // 写字板

  &-content {

    padding: 15px;

    width: 100%;

    height: auto;

    background-color: #fff;

    display: flex;

    justify-content: center;

 

    &-inside {

      display: flex;

      position: relative;

      background-color: rgb(242, 242, 242);

    }

  }

  // 按钮们

  &-buttoms {

    width: 214px;

    margin: 0px auto;

  }

}

</style>