更新记录
1.5.3(2025-08-31)
下载此版本
1.5.2(2025-04-01)
下载此版本
1.5.1(2025-03-28)
下载此版本
查看更多
平台兼容性
云端兼容性
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 写字板
一款用于业务签名等场景的写字板插件,支持横屏、压感模拟、撤销/重做等功能。
文档链接
📚 详细文档请访问以下站点:
安装方法
- 在 uni-app 插件市场中搜索并导入
lime-signature
- 导入后可能需要重新编译项目。
代码演示
基本用法
<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 |
保存为图片 |
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者: |
支付宝赞助 |
微信赞助 |
 |
 |