更新记录

1.5.3（2025-08-31） 下载此版本

• feat: 兼容uniappx鸿蒙next

1.5.2（2025-04-01） 下载此版本

• fix: 修复钉钉小程序无法生成图片的问题

1.5.1（2025-03-28） 下载此版本

• fix: uniapp app 缺少，导致报错

平台兼容性

uni-app(4.74)

uni-app x(4.75)

LimeSignature 写字板

一款用于业务签名等场景的写字板插件，支持横屏、压感模拟、撤销/重做等功能。

文档链接

📚 详细文档请访问以下站点：

• signature 文档 - 站点1
• signature 文档 - 站点2
• signature 文档 - 站点3

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-signature
2. 导入后可能需要重新编译项目。

代码演示

基本用法

<view style="width: 750rpx ;height: 750rpx;">
    <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
</view>
<view>
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">保存</button>
    <!-- uvue 不支持 openSmooth -->
    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>

Uniapp

export default {
    data() {
        return {
            title: 'Hello',
            penColor: 'red',
            penSize: 5,
            url: '',
            openSmooth: true
        }
    },
    methods: {
        onClick(type) {
             if(type == 'openSmooth') {
                 this.openSmooth = !this.openSmooth
                 return
             }
            if (type == 'save') {
                this.$refs.signatureRef.canvasToTempFilePath({
                    success: (res) => {
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        this.url = res.tempFilePath
                    }
                })
                return
            }
            if (this.$refs.signatureRef)
                this.$refs.signatureRef[type]()
        }
    }
}

Uniappx

import {LimeSignatureToTempFilePathOptions, LimeSignatureToFileSuccess} from '@/uni_modules/lime-signature'
export default {
    data() {
        return {
            title: 'Hello',
            penColor: 'red',
            penSize: 5,
            url: '',
            openSmooth: true
        }
    },
    methods: {
        onClick(type: string) {
            const signatureRef = this.$refs['signatureRef'] as LSignatureComponentPublicInstance
            // APP 不支持
            // #ifndef APP 
             if(type == 'openSmooth') {
                 this.openSmooth = !this.openSmooth
             }
             // #endif
            if (type == 'save') {
                signatureRef.canvasToTempFilePath({
                    success: (res: LimeSignatureToFileSuccess) => {
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        this.url = res.tempFilePath
                    }
                } as LimeSignatureToTempFilePathOptions)
                return
            }
            if(type == 'undo'){
                signatureRef.undo()
            }
            if(type == 'redo'){
                signatureRef.redo()
            }
            if(type == 'clear'){
                signatureRef.clear()
            }
        }
    }
}

横屏

通过设置landscape,改变生成图片的方向，达到横屏的作用

<view style="width: 100vw; height: 100vh;">
    <l-signature landscape></l-signature>
</view>
<view style="transform: rotate(90deg);">
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">保存</button>
    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>

API 文档

Props

事件

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助