更新记录

1.0.1（2026-09-03） 下载此版本

横屏模式

1.0.0（2026-09-02） 下载此版本

微信小程序签名板

平台兼容性

其他

SL-WX-QianMing 签名板组件

组件简介

基于 canvas 2d 实现的手写签名板组件，支持签名、撤销、清空、导出 PNG 图片。撤销采用「记录笔画路径 + 全量重绘」方式，规避 getImageData 触发的安全检测问题。支持横屏（hp）模式。

目录结构

components/SL-WX-QianMing
└── SL-WX-QianMing.vue

核心特性

• 手写签名：基于 canvas 2d，使用 quadraticCurveTo 绘制平滑曲线。

• 撤销 / 清空：撤销采用笔画数组管理，全量重绘，安全可靠。

• 导出图片：确认签名后生成临时图片路径 tempFilePath。

• 横屏模式（hp）：开启 hp 后，画布横向布局，按钮纵向排列在右侧，文字旋转 90° 居中显示；导出时通过离屏画布将图片旋转 -90°。

• 可配置样式：画笔颜色、画笔粗细、背景色、占位提示文案均可配置。

• 自定义操作栏：通过 showAction 可隐藏内置按钮，自行实现操作 UI。

• 高 DPR 渲染：按设备像素比缩放画布，保证清晰度。

Props

Events

横屏模式说明

开启 hp 后：

• 布局变为左右排列：画布在左，按钮纵向排列在右侧。

• 占位提示文案以画布中心为旋转点，旋转 90° 居中显示。

• 导出时通过 wx.createOffscreenCanvas 创建离屏画布，将图片旋转 -90° 后导出（仅微信小程序环境支持离屏画布）。

• 内置按钮文字也会旋转 90° 显示。

使用示例

基础用法

<template>
    <view class="page">
        <sl-qianming
            ref="sign"
            :width="690"
            :height="400"
            pen-color="#1a1a1a"
            :pen-size="3"
            @confirm="onConfirm"
            @clear="onClear"
        />
    </view>
</template>

<script>
    export default {
        methods: {
            onConfirm(tempFilePath) {
                console.log('签名图片路径：', tempFilePath)
                uni.previewImage({
                    urls: [tempFilePath]
                })
            },
            onClear() {
                uni.showToast({ title: '已清空', icon: 'none' })
            }
        }
    }
</script>

横屏模式

<template>
    <sl-qianming hp :width="690" :height="400" @confirm="onConfirm" />
</template>

隐藏内置按钮（自行实现操作 UI）

<template>
    <view>
        <sl-qianming ref="sign" :show-action="false" @confirm="onConfirm" />
        <view class="custom-action">
            <button @click="onUndo">撤销</button>
            <button @click="onClear">清空</button>
            <button @click="onConfirmBtn">确认</button>
        </view>
    </view>
</template>

<script>
    export default {
        methods: {
            onUndo() {
                this.$refs.sign.undo()
            },
            onClear() {
                this.$refs.sign.clear()
            },
            onConfirmBtn() {
                this.$refs.sign.confirm()
            },
            onConfirm(tempFilePath) {
                console.log('签名图片路径：', tempFilePath)
            }
        }
    }
</script>

内置方法

通过 ref 可调用以下方法：

this.$refs.sign.undo()
this.$refs.sign.clear()
this.$refs.sign.confirm()

注意事项

1. 组件基于 canvas 2d type，需在支持 canvas 2d 的环境运行（微信小程序基础库 2.9.0+、H5 现代浏览器）。
2. 横屏模式（hp）下的离屏画布导出仅微信小程序支持，其他端会按非旋转方式导出。
3. 撤销机制通过保存笔画路径数组实现，最大保存 maxHistory 条笔画，超出会丢弃最早记录。
4. 确认签名时若未签名，会提示「请先签名」。
5. 触摸坐标基于 clientX/clientY - canvasRect 计算，滚动页面后组件会自动刷新 rect，但仍建议签名区域固定不随页面滚动。