更新记录

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

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

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

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

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

• fix: uniappx 微信小程序的landscape报错

平台兼容性

uni-app(4.44)

uni-app x(4.61)

其他

signature 写字板

写字板，可用业务签名等场景

文档

🚀 signature【站点1】 🌍 signature【站点2】 🔥 signature【站点3】

安装

插件市场导入即可

代码演示

基本用法

<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>

Vue/Nvue

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]()
        }
    }
}

Uvue

import {LSignatureToTempFilePathOptions, LSignatureToFileSuccess} 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: LSignatureToFileSuccess) => {
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        this.url = res.tempFilePath
                    }
                } as LSignatureToTempFilePathOptions)
                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>

插件标签

• 默认 l-signature 为 component
• 默认 lime-signature 为 demo

API

Props

事件 Events

常见问题

• 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加v-if
• boundingBox 微信小程序 pc / uvue 不支持, 因为获取不到 ImageData 数据
• backgroundColor 不能设置为transparent,填了也没用，我在代码里排除了。因为会导致微信小程序无法生成图片

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。