Skip to content

Commit 10ec731

Browse files
810505339810505339
authored
feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例) (#889)
* feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例) * fix: 🐛 修复Signature 撤回跟恢复方法名字不正确的问题 * fix: 🐛 修复撤回跟恢复方法的名字的问题并且修复历史记录记录出错的问题 * fix: 🐛 Signature 给历史记录列表添加一个最大长度限制 * fix: 🐛 Signature 修复文档给自定义footer添加currentStep和historyList * fix: 🐛 Signature 修复<slot/> footer 中historyList 属性
1 parent f63de5b commit 10ec731

21 files changed

Lines changed: 332 additions & 46 deletions

File tree

‎docs/component/signature.md‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ function confirm(result: SignatureResult) {
2727
}
2828
```
2929

30+
## 开启历史记录
31+
32+
```html
33+
<wd-signature :history="true" background-color="lightgray" />
34+
```
35+
3036
## 自定义画笔颜色
3137

3238
`pen-color`设置签名笔的颜色，默认为`黑色`。
@@ -64,11 +70,15 @@ function confirm(result: SignatureResult) {
6470
通过`footer`插槽可以自定义按钮。
6571

6672
```html
67-
<wd-signature :disabled="disabled">
68-
<template #footer="{ clear, confirm }">
73+
<wd-signature :disabled="disabled" :step="3">
74+
<template #footer="{ clear, confirm, currentStep, restore, revoke,historyList }">
6975
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
70-
<wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
71-
<wd-button v-if="!disabled" size="small" custom-style="margin-left: 4px" @click="confirm">确认</wd-button>
76+
<block v-if="!disabled">
77+
<wd-button size="small" plain @click="revoke()" :disabled="currentStep <= 0">撤回三步</wd-button>
78+
<wd-button size="small" plain @click="restore()" :disabled="!(currentStep < historyList.length)">恢复三步</wd-button>
79+
<wd-button size="small" plain @click="clear">清除</wd-button>
80+
<wd-button size="small" style="margin-left: 4px" @click="confirm">确认</wd-button>
81+
</block>
7282
</template>
7383
</wd-signature>
7484
```
@@ -97,12 +107,14 @@ function changeDisabled() {
97107
| disabled | 是否禁用签名板 | Boolean | -- | false | -- |
98108
| backgroundColor | 画板的背景色 | String | -- | -- | -- |
99109
| disableScroll | 是否禁用画布滚动 | Boolean | -- | true | -- |
110+
| history | 是否开启历史记录 | Boolean | -- | false | -- |
111+
| step | 开启历史记录之后的步长(撤回step步) | Number | -- | 1 | -- |
100112

101113
## Slot
102114

103115
| name | 说明 | 参数 | 最低版本 |
104116
|--------|----------------|-----------------------|----------|
105-
| footer | 自定义footer | `{ clear, confirm }` | - |
117+
| footer | 自定义footer | `{ clear, confirm, restore, revoke, currentStep ,historyList }` | - |
106118

107119
## Events
108120

@@ -122,3 +134,5 @@ function changeDisabled() {
122134
|-----------|--------------------|-------------------------------------------|----------|
123135
| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - |
124136
| clear | 点击清空按钮时触发 | - | - |
137+
| restore | 暴露恢复方法 | - | - |
138+
| revoke | 暴露撤回方法 | - | - |

‎src/pages/signature/Index.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
1+
<!--
2+
* @Author: 810505339
3+
* @Date: 2025-02-11 21:17:21
4+
* @LastEditors: 810505339
5+
<<<<<<< HEAD
6+
* @LastEditTime: 2025-02-14 12:22:03
7+
=======
8+
* @LastEditTime: 2025-02-15 21:38:52
9+
>>>>>>> 4c29deae524fe910351cc9a131067fb6124891b7
10+
* @FilePath: \wot-design-uni\src\pages\signature\Index.vue
11+
* 记得注释
12+
-->
113
<template>
214
<page-wraper>
315
<demo-block title="基础用法">
416
<wd-signature @confirm="confirm" @clear="clear" :export-scale="2" />
517
<wd-img v-if="img.tempFilePath" mode="widthFix" width="100%" :src="img.tempFilePath" />
618
</demo-block>
19+
<demo-block title="开启历史记录">
20+
<wd-signature :history="true" background-color="lightgray" />
21+
</demo-block>
722
<demo-block title="自定义画笔颜色">
823
<wd-signature pen-color="red" />
924
</demo-block>
@@ -14,11 +29,15 @@
1429
<wd-signature background-color="lightgray" />
1530
</demo-block>
1631
<demo-block title="自定义插槽">
17-
<wd-signature :disabled="disabled">
18-
<template #footer="{ clear, confirm }">
32+
<wd-signature :disabled="disabled" :history="true" :step="3">
33+
<template #footer="{ clear, confirm, currentStep, restore, revoke, historyList }">
1934
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
20-
<wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
21-
<wd-button v-if="!disabled" size="small" style="margin-left: 4px" @click="confirm">确认</wd-button>
35+
<block v-if="!disabled">
36+
<wd-button size="small" plain @click="revoke()" :disabled="currentStep <= 0">撤回三步</wd-button>
37+
<wd-button size="small" plain @click="restore()" :disabled="!(currentStep < historyList.length)">恢复三步</wd-button>
38+
<wd-button size="small" plain @click="clear">清除</wd-button>
39+
<wd-button size="small" style="margin-left: 4px" @click="confirm">确定</wd-button>
40+
</block>
2241
</template>
2342
</wd-signature>
2443
</demo-block>

‎src/uni_modules/wot-design-uni/components/composables/useTranslate.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2024-01-25 23:06:48
4-
* @LastEditTime: 2025-01-16 21:30:14
5-
* @LastEditors: weisheng
4+
* @LastEditTime: 2025-02-14 11:20:02
5+
* @LastEditors: 810505339
66
* @Description:
7-
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
7+
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\composables\useTranslate.ts
88
* 记得注释
99
*/
1010
import { camelCase, getPropByPath, isFunction } from '../common/util'

‎src/uni_modules/wot-design-uni/components/wd-signature/index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
width: 100%;
1717
}
1818

19+
1920
@include e(footer) {
2021
margin-top: $-signature-footer-margin-top;
2122
justify-content: flex-end;
@@ -27,4 +28,4 @@
2728
}
2829
}
2930
}
30-
}
31+
}

‎src/uni_modules/wot-design-uni/components/wd-signature/types.ts‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/*
22
* @Author: 810505339
33
* @Date: 2025-01-10 20:03:57
4-
* @LastEditors: weisheng
5-
* @LastEditTime: 2025-01-17 16:43:19
6-
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
4+
* @LastEditors: 810505339
5+
* @LastEditTime: 2025-02-18 13:04:45
6+
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\types.ts
77
* 记得注释
88
*/
99
import { baseProps, numericProp } from '../common/props'
@@ -33,6 +33,16 @@ export const signatureProps = {
3333
* 类型：string
3434
*/
3535
clearText: String,
36+
/**
37+
* 撤回按钮的文本
38+
* 类型：string
39+
*/
40+
revokeText: String,
41+
/**
42+
* 恢复按钮的文本
43+
* 类型：string
44+
*/
45+
restoreText: String,
3646
/**
3747
* 确认按钮的文本
3848
* 类型：string
@@ -97,19 +107,32 @@ export const signatureProps = {
97107
disableScroll: {
98108
type: Boolean,
99109
default: true
100-
}
110+
},
111+
/* 是否开始历史记录 */
112+
history: {
113+
type: Boolean,
114+
default: false
115+
},
116+
step: {
117+
type: Number,
118+
default: 1
119+
},
120+
undoText: String,
121+
redoText: String
101122
}
102-
103123
export type SignatureResult = {
104124
tempFilePath: string
105125
success: boolean
106126
width: number
107127
height: number
108128
}
109-
110129
export type SignatureExpose = {
111130
/** 点击清除按钮清除签名 */
112131
clear: () => void
113132
/** 点击确定按钮 */
114133
confirm: (result: SignatureResult) => void
134+
/* 点击恢复 */
135+
restore: () => void
136+
/* 点击撤回 */
137+
revoke: () => void
115138
}

0 commit comments

Comments
 (0)