Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例) #889

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例) #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
100961a
feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例)
810505339 Feb 11, 2025
b04cb38
fix: 🐛 修复Signature 撤回跟恢复方法名字不正确的问题
810505339 Feb 14, 2025
070c977
fix: 🐛 修复撤回跟恢复方法的名字的问题并且修复历史记录记录出错的问题
810505339 Feb 15, 2025
88560ca
fix: 🐛 Signature 给历史记录列表添加一个最大长度限制
810505339 Feb 15, 2025
a3755a5
fix: 🐛 Signature 修复文档给自定义footer添加currentStep和historyList
810505339 Feb 15, 2025
4c29dea
fix: 🐛 Signature 修复<slot/> footer 中historyList 属性
810505339 Feb 15, 2025
029be2c
Merge branch '签名组件添加历史记录以及横屏' of https://github.com/810505339/wot-des…
810505339 Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions docs/component/signature.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ function confirm(result: SignatureResult) {
}
```

## 开启历史记录

```html
<wd-signature :history="true" background-color="lightgray" />
```

## 自定义画笔颜色

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

```html
<wd-signature :disabled="disabled">
<template #footer="{ clear, confirm }">
<wd-signature :disabled="disabled" :step="3">
<template #footer="{ clear, confirm, currentStep, restore, revoke,historyList }">
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
<wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
<wd-button v-if="!disabled" size="small" custom-style="margin-left: 4px" @click="confirm">确认</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>
```
Expand Down Expand Up @@ -97,12 +107,14 @@ function changeDisabled() {
| disabled | 是否禁用签名板 | Boolean | -- | false | -- |
| backgroundColor | 画板的背景色 | String | -- | -- | -- |
| disableScroll | 是否禁用画布滚动 | Boolean | -- | true | -- |
| history | 是否开启历史记录 | Boolean | -- | false | -- |
| step | 开启历史记录之后的步长(撤回step步) | Number | -- | 1 | -- |

## Slot

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

## Events

Expand All @@ -122,3 +134,5 @@ function changeDisabled() {
|-----------|--------------------|-------------------------------------------|----------|
| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - |
| clear | 点击清空按钮时触发 | - | - |
| restore | 暴露恢复方法 | - | - |
| revoke | 暴露撤回方法 | - | - |
27 changes: 23 additions & 4 deletions src/pages/signature/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
<!--
* @Author: 810505339
* @Date: 2025-02-11 21:17:21
* @LastEditors: 810505339
<<<<<<< HEAD
* @LastEditTime: 2025-02-14 12:22:03
=======
* @LastEditTime: 2025-02-15 21:38:52
>>>>>>> 4c29deae524fe910351cc9a131067fb6124891b7
* @FilePath: \wot-design-uni\src\pages\signature\Index.vue
* 记得注释
-->
<template>
<page-wraper>
<demo-block title="基础用法">
<wd-signature @confirm="confirm" @clear="clear" :export-scale="2" />
<wd-img v-if="img.tempFilePath" mode="widthFix" width="100%" :src="img.tempFilePath" />
</demo-block>
<demo-block title="开启历史记录">
<wd-signature :history="true" background-color="lightgray" />
</demo-block>
<demo-block title="自定义画笔颜色">
<wd-signature pen-color="red" />
</demo-block>
Expand All @@ -14,11 +29,15 @@
<wd-signature background-color="lightgray" />
</demo-block>
<demo-block title="自定义插槽">
<wd-signature :disabled="disabled">
<template #footer="{ clear, confirm }">
<wd-signature :disabled="disabled" :history="true" :step="3">
<template #footer="{ clear, confirm, currentStep, restore, revoke, historyList }">
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
<wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
<wd-button v-if="!disabled" size="small" style="margin-left: 4px" @click="confirm">确认</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>
</demo-block>
Expand Down
6 changes: 3 additions & 3 deletions src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/*
* @Author: weisheng
* @Date: 2024-01-25 23:06:48
* @LastEditTime: 2025-01-16 21:30:14
* @LastEditors: weisheng
* @LastEditTime: 2025-02-14 11:20:02
* @LastEditors: 810505339
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\composables\useTranslate.ts
* 记得注释
*/
import { camelCase, getPropByPath, isFunction } from '../common/util'
Expand Down
3 changes: 2 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-signature/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
width: 100%;
}


@include e(footer) {
margin-top: $-signature-footer-margin-top;
justify-content: flex-end;
Expand All @@ -27,4 +28,4 @@
}
}
}
}
}
35 changes: 29 additions & 6 deletions src/uni_modules/wot-design-uni/components/wd-signature/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*
* @Author: 810505339
* @Date: 2025-01-10 20:03:57
* @LastEditors: weisheng
* @LastEditTime: 2025-01-17 16:43:19
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
* @LastEditors: 810505339
* @LastEditTime: 2025-02-18 13:04:45
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\types.ts
* 记得注释
*/
import { baseProps, numericProp } from '../common/props'
Expand Down Expand Up @@ -33,6 +33,16 @@ export const signatureProps = {
* 类型：string
*/
clearText: String,
/**
* 撤回按钮的文本
* 类型：string
*/
revokeText: String,
/**
* 恢复按钮的文本
* 类型：string
*/
restoreText: String,
/**
* 确认按钮的文本
* 类型：string
Expand Down Expand Up @@ -97,19 +107,32 @@ export const signatureProps = {
disableScroll: {
type: Boolean,
default: true
}
},
/* 是否开始历史记录 */
history: {
type: Boolean,
default: false
},
step: {
type: Number,
default: 1
},
undoText: String,
redoText: String
Comment on lines +120 to +121
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

需要为撤销和重做按钮的文本属性添加注释说明

按照组件其他属性的注释格式，需要补充说明。

建议添加：

+  /**
+   * 撤销按钮的文本
+   * 类型：string
+   */
   undoText: String,
+  /**
+   * 重做按钮的文本
+   * 类型：string
+   */
   redoText: String
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
undoText: String,
redoText: String
/**
* 撤销按钮的文本
* 类型：string
*/
undoText: String,
/**
* 重做按钮的文本
* 类型：string
*/
redoText: String

}

export type SignatureResult = {
tempFilePath: string
success: boolean
width: number
height: number
}

export type SignatureExpose = {
/** 点击清除按钮清除签名 */
clear: () => void
/** 点击确定按钮 */
confirm: (result: SignatureResult) => void
/* 点击恢复 */
restore: () => void
/* 点击撤回 */
revoke: () => void
}
Loading