[JavaScript知识库]vue3实现签字板的效果

下载插件

?https://github.com/szimek/signature_pad

?yarn add signature_pad

创建.vue文件

<template>
  <div class="signature" v-loading="loading">
    <div class="signature-content">
      <div class="signature-content-inside">
        <canvas class="canvas" />
      </div>
    </div>
    <div class="signature-buttoms">
      <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>

?

<style lang="scss" 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>

?

?