更新记录

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)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- 5.0
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - -

uni-app x(4.75)

Chrome Safari Android iOS 鸿蒙 微信小程序
5.0

LimeSignature 写字板

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

文档链接

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

安装方法

  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

参数 说明 类型 默认值
penSize 画笔大小 number 2
minLineWidth 线条最小宽度 number 2
maxLineWidth 线条最大宽度 number 6
penColor 画笔颜色 string black
backgroundColor 背景颜色(透明背景需留空) string ``
openSmooth 是否模拟压感 boolean false
landscape 横屏模式 boolean false
disableScroll 禁用滚动 boolean true
disabled 禁用写字板 boolean false

事件

事件名 说明
undo 撤销操作
clear 清空画板
canvasToTempFilePath 保存为图片

支持与赞赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议