Signature 签名 1.6.0
用于签名场景，基于 Canvas 实现的签名组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮。
提醒
如果遇到导出图片不清晰，可以将exportScale设置为2以上。
基础用法
html
<wd-signature @submit="confirm" @clear="clear" />
<wd-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" />typescript
const img = ref({
width: 0,
height: 0,
src: ''
})
function confirm(result: SignatureResult) {
img.value.src = result.tempFilePath
img.value.height = result.height
img.value.width = result.width
}开启历史记录
html
<wd-signature :history="true" background-color="lightgray" />自定义画笔颜色
pen-color设置签名笔的颜色，默认为黑色。
html
<wd-signature pen-color="red" />自定义画笔宽度
line-width设置签名笔的宽度，默认为2。
html
<wd-signature :line-width="6" />自定义背景色
background-color设置画板的背景色，无默认值。
html
<wd-signature background-color="lightgray" />禁用滚动
disable-scroll设置是否禁用画布滚动，默认为true。
html
<wd-signature :disable-scroll="false" />自定义按钮
通过footer插槽可以自定义按钮。
html
<wd-signature :disabled="disabled" :step="3">
<template #footer="{ clear, confirm, currentStep, restore, revoke,historyList }">
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
<block v-if="!disabled">
<wd-button size="small" plain @click="revoke()" :disabled="currentStep <= 0">撤回三步</wd-button>
<wd-button size="small" plain @click="restore()" :disabled="!(currentStep < historyList.length)">恢复三步</wd-button>
<wd-button size="small" plain @click="clear">清除</wd-button>
<wd-button size="small" style="margin-left: 4px" @click="confirm">确认</wd-button>
</block>
</template>
</wd-signature>typescript
const disabled = ref(true)
function changeDisabled() {
disabled.value = false
}Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|---|---|---|---|---|---|
| penColor | 签名笔颜色 | String | -- | #000000 | -- |
| lineWidth | 签名笔宽度 | Number | -- | 2 | -- |
| height | 画布的高度 | Number | -- | 200 | -- |
| width | 画布的宽度 | Number | -- | 300 | -- |
| clearText | 清空按钮的文本 | String | -- | 清空 | -- |
| confirmText | 确认按钮的文本 | String | -- | 确认 | -- |
| fileType | 目标文件的类型，uni.canvasToTempFilePath属性介绍 | String | -- | png | -- |
| quality | 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理，uni.canvasToTempFilePath属性介绍 | Number | -- | 1 | -- |
| exportScale | 导出图片的缩放比例 | Number | -- | 1 | -- |
| disabled | 是否禁用签名板 | Boolean | -- | false | -- |
| backgroundColor | 画板的背景色 | String | -- | -- | -- |
| disableScroll | 是否禁用画布滚动 | Boolean | -- | true | -- |
| history | 是否开启历史记录 | Boolean | -- | false | -- |
| step | 开启历史记录之后的步长(撤回step步) | Number | -- | 1 | -- |
Slot
| name | 说明 | 参数 | 最低版本 |
|---|---|---|---|
| footer | 自定义footer | { clear, confirm, restore, revoke, currentStep ,historyList } | - |
Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---|---|---|---|
| start | 开始签名时触发 | - | - |
| end | 结束签名时触发 | - | - |
| signing | 签名过程中触发 | event | - |
| confirm | 点击确定按钮时触发 | {tempFilePath, width, height, success} 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - |
| clear | 点击清空按钮时触发 | - | - |
Methods
对外暴露函数
| 事件名称 | 说明 | 参数 | 最低版本 |
|---|---|---|---|
| confirm | 点击确认按钮时触发 | {tempFilePath, width, height, success} 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - |
| clear | 点击清空按钮时触发 | - | - |
| restore | 暴露恢复方法 | - | - |
| revoke | 暴露撤回方法 | - | - |