uniapp在线签名签字板lime-signature
uniapp 在綫签名 lime-signature 首先了解业务需求 在什么时候需要在线签名呢总体而言,签名是一种权威和法律承认的方式,用于确认参与者的意愿、意见或身份。在许多不同的行业和场景中,签名都扮演着重要的角色。
·
首先了解业务需求 在什么时候需要在线签名呢
签名通常在以下情况下需要使用:
- 合同签署:在商业合同、租赁合同、购房合同等法律文件中,签名是证明参与者同意合同内容和条款的重要方式。
- 授权确认:某些场景需要用户通过签名来确认授权,例如在软件或移动应用程序中,用户可能需要用手写签名确认授权使用某些功能或服务。
- 文件认证:在法律、财务、医疗等领域,签名可用于文件的认证和验证,确保文件的真实性和完整性。
- 批准或确认:在企业管理中,领导或负责人可能需要签名来批准某项决策或确认某项业务。
- 艺术创作:在艺术创作中,签名是艺术家对作品的认可和鉴定,也是作品的版权标识。
- 个人身份认证:在某些情况下,签名可用作个人身份认证,例如签署银行文件或开户申请。
总体而言,签名是一种权威和法律承认的方式,用于确认参与者的意愿、意见或身份。在许多不同的行业和场景中,签名都扮演着重要的角色。
使用前需在插件市场安装插件 插件ID:lime-signature
HTML代码
<template>
<view class='signature h-100'>
<view class='h-100'>
<l-signature
disableScroll
backgroundColor='#ddd'
ref='signatureRef'
:penColor='penColor'
:penSize='penSize'
:openSmooth='openSmooth'
></l-signature>
</view>
<view class='button'>
<view @click='onClick("clear")'>
<!-- clear按钮的SVG图标 -->
清空
</view>
<view @click='onClick("undo")'>
<!-- undo按钮的SVG图标 -->
撤回
</view>
<view @click='onClick("save")'>
<!-- save按钮的SVG图标 -->
保存
</view>
</view>
</view>
</template>
Javascript代码
<script>
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]()
}
}
}
</script>
Css代码
<style>
.signature {
position: relative;
}
.button {
position: absolute;
background: #fff;
padding: 10px;
bottom: 0;
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
}
.h-100 {
height: 100%;
}
</style>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
penSize | 画笔大小 | number | 2 |
minLineWidth | 线条最小宽 | number | 2 |
maxLineWidth | 线条最大宽 | number | 6 |
penColor | 画笔颜色 | string | black |
backgroundColor | 背景颜色 | string | “” |
type | 指定 canvas 类型 | string | 2d |
openSmooth | 是否模拟压感 | boolean | false |
beforeDelay | 延时初始化,在放在弹窗里可以使用 (毫秒) | number | 0 |
maxHistoryLength | 限制历史记录数,即最大可撤销数,传入0则关闭历史记录功能 | boolean | 20 |
landscape | 横屏 | boolean | |
disableScroll | 当在写字时,禁止屏幕滚动以及下拉刷新 | boolean | true |
boundingBox | 只生成内容区域,即未画部分不生成,有性能的损耗 | boolean | false |
事件 Events
事件名 | 说明 | 回调 |
---|---|---|
undo | 撤消,回退到上一步 | |
clear | 清空,清空画板 | |
canvasToTempFilePath | 保存,生成图片,与官方保持一致,但不需要传canvasId |
Vue 2 和 Vue 3 的平台兼容性:
平台/浏览器 | Vue 2 兼容性 | Vue 3 兼容性 |
---|---|---|
App | √ | √ |
快应用 | × | × |
微信小程序 | √ | √ |
支付宝小程序 | √ | √ |
百度小程序 | √ | √ |
字节小程序 | √ | √ |
QQ小程序 | √ | √ |
HBuilderX 3.5.4 app-vue | √ | √ |
HBuilderX 3.5.4 app-nvue | √ | √ |
钉钉小程序 | × | × |
快手小程序 | × | × |
飞书小程序 | × | × |
京东小程序 | × | × |
H5-Safari | √ | √ |
Android Browser | √ | √ |
微信浏览器(Android) | √ | √ |
QQ浏览器(Android) | √ | √ |
Chrome | √ | √ |
IE | × | × |
Edge | × | × |
Firefox | √ | √ |
PC-Safari | √ | √ |
更多推荐
已为社区贡献1条内容
所有评论(0)