|
| 1 | +# Signature 组件 |
| 2 | +`Signature`组件是一个用于生成手写签名的 Vue 组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮 |
| 3 | +## 基础用法 |
| 4 | +```html |
| 5 | +<wd-signature @confirm="confirm" /> |
| 6 | +<wd-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" /> |
| 7 | +``` |
| 8 | + |
| 9 | +```typescript |
| 10 | +const img = ref({ |
| 11 | + width: 0, |
| 12 | + height: 0, |
| 13 | + src: '' |
| 14 | +}) |
| 15 | +function confirm(result: FileType) { |
| 16 | + img.value.src = result.tempFilePath |
| 17 | + img.value.height = result.height |
| 18 | + img.value.width = result.width |
| 19 | +} |
| 20 | +``` |
| 21 | +## 自定义颜色 |
| 22 | +`pen-color`设置签名笔的颜色，默认为`黑色` |
| 23 | +```html |
| 24 | +<wd-signature pen-color="red" /> |
| 25 | +``` |
| 26 | + |
| 27 | + |
| 28 | +## 自定义宽度 |
| 29 | +`line-width`设置签名笔的宽度，默认为`2`。 |
| 30 | +```html |
| 31 | +<wd-signature :line-width="6" /> |
| 32 | +``` |
| 33 | + |
| 34 | +## 自定义按钮 |
| 35 | +通过`footer`插槽可以自定义按钮 |
| 36 | +```html |
| 37 | +<wd-signature :disabled="disabled"> |
| 38 | + <template #footer="{ clear, confirm }"> |
| 39 | + <wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button> |
| 40 | + <wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button> |
| 41 | + <wd-button v-if="!disabled" size="small" style="margin-left: 4px" @click="confirm">确认</wd-button> |
| 42 | + </template> |
| 43 | +</wd-signature> |
| 44 | +``` |
| 45 | +```typescript |
| 46 | +const disabled = ref(true) |
| 47 | + |
| 48 | +function changeDisabled() { |
| 49 | + disabled.value = false |
| 50 | +} |
| 51 | +``` |
| 52 | +## Attributes |
| 53 | +| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 | |
| 54 | +|-----|------|-----|-------|-------|--------| |
| 55 | +| penColor | 签名笔颜色 | String | -- | #000000 | -- | |
| 56 | +| lineWidth | 签名笔宽度 | Number | -- | 2 | -- | |
| 57 | +| height | 画布的高度 | Number | -- | 200 | -- | |
| 58 | +| width | 画布的宽度 | Number | -- | 300 | -- | |
| 59 | +| clearText | 清空按钮的文本 | String |-- | 清空 | -- | |
| 60 | +| confirmText | 确认按钮的文本 | String | -- | 确认 | -- | |
| 61 | +| fileType | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | String | -- | png | -- | |
| 62 | +| quality | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | Number | -- | 1 |-- | |
| 63 | +| exportScale | 导出图片的缩放比例 | Number | -- | 1 |-- | |
| 64 | +| disabled | 是否禁用签名板 | Boolean | -- | false | -- | |
| 65 | + |
| 66 | +## Slot |
| 67 | + |
| 68 | +| name | 说明 |参数 | 最低版本 | |
| 69 | +| ------- | ------------------------ |--- | -------- | |
| 70 | +| footer | 自定义footer | `{ clear, confirm }` |- | |
| 71 | + |
| 72 | +## Events |
| 73 | + |
| 74 | +| 事件名称 | 说明 | 参数 | 最低版本 | |
| 75 | +|---------|-----|-----|---------| |
| 76 | +| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - | |
| 77 | +| clear | 点击清空按钮时触发 | - | - | |
| 78 | +| touchstart | 按下时触发 | `event`| - | |
| 79 | +| touchend | 按下结束时触发 | `event` | - | |
| 80 | + |
| 81 | +## Methods |
| 82 | +对外暴露函数 |
| 83 | + |
| 84 | +| 事件名称 | 说明 | 参数 | 最低版本 | |
| 85 | +|--------|------|-----|---------| |
| 86 | +| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - | |
| 87 | +| clear | 点击清空按钮时触发 | - | - | |
0 commit comments