vue 移动端手写签名组件(引用signature_pad)

最新推荐文章于 2025-04-11 09:27:50 发布

可乐_了

最新推荐文章于 2025-04-11 09:27:50 发布

阅读量7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_39099766/article/details/107658152

本文介绍了如何在Vue移动端项目中封装一个基于Signature Pad的手写签名组件。首先阐述了因业务需求寻找合适组件未果而决定自行封装的过程，然后展示了设计图，并详细说明了组件的创建步骤，包括引入Signature Pad库、创建components/autograph/index.vue组件以及如何在项目中使用。最终，组件的receiveQmValue方法返回签名的base64值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近业务上需要用到移动端手写签名, 找了几个组件都不太如意, 遂自己封装一个组件

设计图如下:
在这里插入图片描述

本组件基于Signature Pad库, 在Signature Pad库的基础上完成上方设计图中的手写签名组件, 所以需要先引入Signature Pad npm包 --------- 点我跳转查看(Signature Pad)

npm install --save signature_pad

创建手写签名组件 components/autograph/index.vue

<template>
<div class="xhy-autograph-box">
    <div class="autograph-box">
        <div class="inside">
            <van-icon class="icon-full" name="enlarge" color="#008cff" @click="fullScreenShow" />
            <canvas class="xhy-canvas" />
            <span @click="againSignature">重新签名</span>
        </div>
    </div>
    <van-popup v-model="isShowFull" @close="closeFull" :close-on-click-overlay="false" close-on-popstate safe-area-inset-bottom closeable close-icon-position="bottom-right" position="left" :style="{ height: '100%', width: '100%' }">
        <div class="popup-box">
            <canvas class="xhy-canvasFull" />
            <div class="panel-full">
                <van-button class="btn-again" type="info" @click="againFull">重新签名</van-button>
                <van-button class="btn-confirm" plain type="primary" @click="confirmFull">确认签名</van-button>
            </div>
        </div>
    </van-popup>
</div>
</template>

<script>
import SignaturePad from 'signature_pad';
export default {
   
   
    name: "xhy-autograph",
    props: {
   
   
        config: {
   
   
            type: Object,
            default: {
   
   
                penColor: 'green', //笔刷颜色
                minWidth: 1 //最小宽度
            }
        }
    },
    data() {
   
   
        return {
   
   
            isShowFull: false, // 是否横屏显示
            signaturePad: null, // 存放竖屏SignaturePad对象
            signaturePadFull: null, // 存放横屏SignaturePad对象
            value: '',
            fullValue: ''
        }
    },
    mounted() {
   
   
        this.init();
    },
    methods: {
   
   
        init() {
   
   
            if (!this.signaturePad)