From 5374a2f3173500f215b3ba5cf507de0f6c2c0a59 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 1 May 2023 16:20:03 +0800 Subject: [PATCH] chore(Signature): improve default style (#11795) --- packages/vant/src/signature/README.md | 8 ++++---- packages/vant/src/signature/README.zh-CN.md | 16 ++++++++-------- packages/vant/src/signature/Signature.tsx | 2 +- packages/vant/src/signature/index.less | 8 ++++++-- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/vant/src/signature/README.md b/packages/vant/src/signature/README.md index ad84c546a..19c816527 100644 --- a/packages/vant/src/signature/README.md +++ b/packages/vant/src/signature/README.md @@ -2,7 +2,7 @@ ### 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 @@ -69,8 +69,8 @@ export default { | Parameter | Description | Type | Default | | --- | --- | --- | --- | | type | Export image type | _string_ | `png` | -| penColor | Color of the brush stroke, default is black | _string_ | `#000` | -| lineWidth | Width of the line | _number_ | `3` | +| pen-color | Color of the brush stroke, default is black | _string_ | `#000` | +| line-width | Width of the line | _number_ | `3` | | tips | Text that appears when Canvas is not supported | _string_ | - | ### Events @@ -100,6 +100,6 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --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-border | _1px dotted #dadada_ | Border style of the canvas | diff --git a/packages/vant/src/signature/README.zh-CN.md b/packages/vant/src/signature/README.zh-CN.md index 40a972967..de5e1de0e 100644 --- a/packages/vant/src/signature/README.zh-CN.md +++ b/packages/vant/src/signature/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -用于签名场景的组件，基于 Canvas。 +用于签名场景的组件，基于 Canvas 实现。请升级 `vant` 到 >= 4.3.0 版本来使用该组件。 ### 引入 @@ -66,12 +66,12 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --------- | ------------------------------------ | -------- | ------ | -| type | 导出图片类型 | _string_ | `png` | -| penColor | 笔触颜色，默认黑色 | _string_ | `#000` | -| lineWidth | 线条宽度 | _number_ | `3` | -| tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | ------------------------------------ | -------- | ------ | +| type | 导出图片类型 | _string_ | `png` | +| pen-color | 笔触颜色，默认黑色 | _string_ | `#000` | +| line-width | 线条宽度 | _number_ | `3` | +| tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - | ### Events @@ -100,6 +100,6 @@ import type { SignatureProps } from 'vant'; | 名称 | 默认值 | 描述 | | --- | --- | --- | | --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-border | _1px dotted #dadada_ | 画布边框样式 | diff --git a/packages/vant/src/signature/Signature.tsx b/packages/vant/src/signature/Signature.tsx index d3a01aec2..0b272fe6e 100644 --- a/packages/vant/src/signature/Signature.tsx +++ b/packages/vant/src/signature/Signature.tsx @@ -90,7 +90,7 @@ export default defineComponent({ }; const isCanvasEmpty = (canvas: HTMLCanvasElement) => { - const empty: HTMLCanvasElement = document.createElement('canvas'); + const empty = document.createElement('canvas'); empty.width = canvas.width; empty.height = canvas.height; return canvas.toDataURL() === empty.toDataURL(); diff --git a/packages/vant/src/signature/index.less b/packages/vant/src/signature/index.less index 22a35b40e..ad3791bb1 100644 --- a/packages/vant/src/signature/index.less +++ b/packages/vant/src/signature/index.less @@ -1,6 +1,6 @@ :root { --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-border: 1px dotted #dadada; } @@ -15,6 +15,8 @@ height: var(--van-signature-content-height); background-color: var(--van-signature-content-background); border: var(--van-signature-content-border); + border-radius: var(--van-radius-lg); + overflow: hidden; } &__footer { @@ -22,7 +24,9 @@ justify-content: flex-end; .van-button { - margin: 4px; + padding: 0 var(--van-padding-md); + margin-top: var(--van-padding-xs); + margin-left: var(--van-padding-xs); } } }