diff --git a/docs/component/signature.md b/docs/component/signature.md index fece7562..e5719c46 100644 --- a/docs/component/signature.md +++ b/docs/component/signature.md @@ -1,8 +1,15 @@ -# Signature 组件 -`Signature`组件是一个用于生成手写签名的 Vue 组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮 +# Signature 签名 $LOWEST_VERSION$ + +用于签名场景，基于 Canvas 实现的签名组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮。 + +:::tip 提醒 +如果遇到导出图片不清晰，可以将`exportScale`设置为`2`以上。 +::: + ## 基础用法 + ```html - + ``` @@ -12,36 +19,60 @@ const img = ref({ height: 0, src: '' }) -function confirm(result: FileType) { + +function confirm(result: SignatureResult) { img.value.src = result.tempFilePath img.value.height = result.height img.value.width = result.width } ``` -## 自定义颜色 -`pen-color`设置签名笔的颜色，默认为`黑色` + +## 自定义画笔颜色 + +`pen-color`设置签名笔的颜色，默认为`黑色`。 + ```html ``` +## 自定义画笔宽度 -## 自定义宽度 `line-width`设置签名笔的宽度，默认为`2`。 + ```html ``` +## 自定义背景色 + +`background-color`设置画板的背景色，无默认值。 + +```html + +``` + +## 禁用滚动 + +`disable-scroll`设置是否禁用画布滚动，默认为`true`。 + +```html + +``` + ## 自定义按钮 -通过`footer`插槽可以自定义按钮 + +通过`footer`插槽可以自定义按钮。 + ```html ``` + ```typescript const disabled = ref(true) @@ -49,39 +80,45 @@ function changeDisabled() { disabled.value = false } ``` + ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 | -|-----|------|-----|-------|-------|--------| -| penColor | 签名笔颜色 | String | -- | #000000 | -- | -| lineWidth | 签名笔宽度 | Number | -- | 2 | -- | -| height | 画布的高度 | Number | -- | 200 | -- | -| width | 画布的宽度 | Number | -- | 300 | -- | -| clearText | 清空按钮的文本 | String |-- | 清空 | -- | -| confirmText | 确认按钮的文本 | String | -- | 确认 | -- | -| fileType | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | String | -- | png | -- | -| quality | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | Number | -- | 1 |-- | -| exportScale | 导出图片的缩放比例 | Number | -- | 1 |-- | -| disabled | 是否禁用签名板 | Boolean | -- | false | -- | + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +|-----------------|----------------------------------------------------------------------|---------|--------|----------|----------| +| penColor | 签名笔颜色 | String | -- | #000000 | -- | +| lineWidth | 签名笔宽度 | Number | -- | 2 | -- | +| height | 画布的高度 | Number | -- | 200 | -- | +| width | 画布的宽度 | Number | -- | 300 | -- | +| clearText | 清空按钮的文本 | String | -- | 清空 | -- | +| confirmText | 确认按钮的文本 | String | -- | 确认 | -- | +| fileType | 目标文件的类型，[uni.canvasToTempFilePath属性介绍](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html) | String | -- | png | -- | +| quality | 图片的质量，取值范围为 `(0, 1]`，不在范围内时当作1.0处理，[uni.canvasToTempFilePath属性介绍](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html) | Number | -- | 1 | -- | +| exportScale | 导出图片的缩放比例 | Number | -- | 1 | -- | +| disabled | 是否禁用签名板 | Boolean | -- | false | -- | +| backgroundColor | 画板的背景色 | String | -- | -- | -- | +| disableScroll | 是否禁用画布滚动 | Boolean | -- | true | -- | ## Slot -| name | 说明 |参数 | 最低版本 | -| ------- | ------------------------ |--- | -------- | -| footer | 自定义footer | `{ clear, confirm }` |- | +| name | 说明 | 参数 | 最低版本 | +|--------|----------------|-----------------------|----------| +| footer | 自定义footer | `{ clear, confirm }` | - | ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|---------|-----|-----|---------| -| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - | -| clear | 点击清空按钮时触发 | - | - | -| touchstart | 按下时触发 | `event`| - | -| touchend | 按下结束时触发 | `event` | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +|-----------|--------------------|-------------------------------------------|----------| +| start | 开始签名时触发 | - | - | +| end | 结束签名时触发 | - | - | +| signing | 签名过程中触发 | `event` | - | +| confirm | 点击确定按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - | +| clear | 点击清空按钮时触发 | - | - | ## Methods + 对外暴露函数 -| 事件名称 | 说明 | 参数 | 最低版本 | -|--------|------|-----|---------| -| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - | -| clear | 点击清空按钮时触发 | - | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +|-----------|--------------------|-------------------------------------------|----------| +| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - | +| clear | 点击清空按钮时触发 | - | - | diff --git a/src/pages/signature/Index.vue b/src/pages/signature/Index.vue index 429c0c8a..ceb142c9 100644 --- a/src/pages/signature/Index.vue +++ b/src/pages/signature/Index.vue @@ -1,24 +1,19 @@ -