blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Signature): improve default style (#11795)

Browse Source
This commit is contained in:
neverland 2023-05-01 16:20:03 +08:00 committed by GitHub
parent 51f7cefd96
commit 5374a2f317
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/vant/src/signature/README.md
View File

@ -2,7 +2,7 @@
### Intro ### Intro
Component for signature scene, based on Canvas. Component for signature scene, based on Canvas. Please upgrade `vant` to >= v4.3.0 before using this component.
### Install ### Install
@ -69,8 +69,8 @@ export default {
| Parameter | Description | Type | Default | | Parameter | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| type | Export image type | _string_ | `png` | | type | Export image type | _string_ | `png` |
| penColor | Color of the brush stroke, default is black | _string_ | `#000` | | pen-color | Color of the brush stroke, default is black | _string_ | `#000` |
| lineWidth | Width of the line | _number_ | `3` | | line-width | Width of the line | _number_ | `3` |
| tips | Text that appears when Canvas is not supported | _string_ | - | | tips | Text that appears when Canvas is not supported | _string_ | - |
### Events ### Events
@ -100,6 +100,6 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description | | Name | Default Value | Description |
| --- | --- | --- | | --- | --- | --- |
| --van-signature-padding | _var(--van-padding-xs)_ | - | | --van-signature-padding | _var(--van-padding-xs)_ | - |
| --van-signature-content-height | _160px_ | Height of the canvas | | --van-signature-content-height | _200px_ | Height of the canvas |
| --van-signature-content-background | _var(--van-background-2)_ | Background color of the canvas | | --van-signature-content-background | _var(--van-background-2)_ | Background color of the canvas |
| --van-signature-content-border | _1px dotted #dadada_ | Border style of the canvas | | --van-signature-content-border | _1px dotted #dadada_ | Border style of the canvas |

16
packages/vant/src/signature/README.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍 ### 介绍
用于签名场景的组件，基于 Canvas。 用于签名场景的组件，基于 Canvas 实现。请升级 `vant` 到 >= 4.3.0 版本来使用该组件。
### 引入 ### 引入
@ -66,12 +66,12 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --------- | ------------------------------------ | -------- | ------ | | ---------- | ------------------------------------ | -------- | ------ |
| type | 导出图片类型 | _string_ | `png` | | type | 导出图片类型 | _string_ | `png` |
| penColor | 笔触颜色，默认黑色 | _string_ | `#000` | | pen-color | 笔触颜色，默认黑色 | _string_ | `#000` |
| lineWidth | 线条宽度 | _number_ | `3` | | line-width | 线条宽度 | _number_ | `3` |
| tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - | | tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - |
### Events ### Events
@ -100,6 +100,6 @@ import type { SignatureProps } from 'vant';
| 名称 | 默认值 | 描述 | | 名称 | 默认值 | 描述 |
| --- | --- | --- | | --- | --- | --- |
| --van-signature-padding | _var(--van-padding-xs)_ | - | | --van-signature-padding | _var(--van-padding-xs)_ | - |
| --van-signature-content-height | _160px_ | 画布高度 | | --van-signature-content-height | _200px_ | 画布高度 |
| --van-signature-content-background | _var(--van-background-2)_ | 画布背景色 | | --van-signature-content-background | _var(--van-background-2)_ | 画布背景色 |
| --van-signature-content-border | _1px dotted #dadada_ | 画布边框样式 | | --van-signature-content-border | _1px dotted #dadada_ | 画布边框样式 |

2
packages/vant/src/signature/Signature.tsx
View File

@ -90,7 +90,7 @@ export default defineComponent({
}; };
const isCanvasEmpty = (canvas: HTMLCanvasElement) => { const isCanvasEmpty = (canvas: HTMLCanvasElement) => {
const empty: HTMLCanvasElement = document.createElement('canvas'); const empty = document.createElement('canvas');
empty.width = canvas.width; empty.width = canvas.width;
empty.height = canvas.height; empty.height = canvas.height;
return canvas.toDataURL() === empty.toDataURL(); return canvas.toDataURL() === empty.toDataURL();

8
packages/vant/src/signature/index.less
View File

@ -1,6 +1,6 @@
:root { :root {
--van-signature-padding: var(--van-padding-xs); --van-signature-padding: var(--van-padding-xs);
--van-signature-content-height: 160px; --van-signature-content-height: 200px;
--van-signature-content-background: var(--van-background-2); --van-signature-content-background: var(--van-background-2);
--van-signature-content-border: 1px dotted #dadada; --van-signature-content-border: 1px dotted #dadada;
} }
@ -15,6 +15,8 @@
height: var(--van-signature-content-height); height: var(--van-signature-content-height);
background-color: var(--van-signature-content-background); background-color: var(--van-signature-content-background);
border: var(--van-signature-content-border); border: var(--van-signature-content-border);
border-radius: var(--van-radius-lg);
overflow: hidden;
} }
&__footer { &__footer {
@ -22,7 +24,9 @@
justify-content: flex-end; justify-content: flex-end;
.van-button { .van-button {
margin: 4px; padding: 0 var(--van-padding-md);
margin-top: var(--van-padding-xs);
margin-left: var(--van-padding-xs);
} }
} }
} }