blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

docs(Signature): add background color demo (#11890)

Browse Source 
* docs(Signature): add background color demo

* fix: update test snapshots
This commit is contained in:
inottn 2023-05-21 21:50:19 +08:00 committed by GitHub
parent 9e818162e2
commit 7a2e7d3eb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 95 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,7 @@ Use `pen-color` prop to set the color of the brush stroke.
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
```
### LineWidth
### Line Width
Use `line-width` prop to set the width of the line.
@ -67,6 +67,14 @@ Use `line-width` prop to set the width of the line.
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
```
### Background Color
Use `background-color` prop to set the color of the background.
```html
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />
```
## API
### Props

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

@ -67,6 +67,14 @@ export default {
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
```
### 自定义背景颜色
通过 `background-color` 来自定义背景颜色。
```html
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />
```
## API
### Props

18
packages/vant/src/signature/demo/index.vue
View File

@ -7,14 +7,14 @@ import { showToast } from '../../toast';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
penColor: '自定义颜色',
lineWidth: '自定义线宽',
backgroundColor: '自定义背景颜色',
},
'en-US': {
basic: 'basic',
penColor: 'penColor',
lineWidth: 'lineWidth',
penColor: 'Pen Color',
lineWidth: 'Line Width',
backgroundColor: 'Background Color',
},
});
@ -28,7 +28,7 @@ const onClear = () => showToast('clear');
</script>
<template>
<demo-block :title="t('basic')">
<demo-block :title="t('basicUsage')">
<van-signature @submit="onSubmit" @clear="onClear" />
</demo-block>
@ -41,4 +41,12 @@ const onClear = () => showToast('clear');
<demo-block :title="t('lineWidth')">
<van-signature :line-width="6" @clear="onClear" @submit="onSubmit" />
</demo-block>
<demo-block :title="t('backgroundColor')">
<van-signature
background-color="#eee"
@clear="onClear"
@submit="onSubmit"
/>
</demo-block>
</template>

35
packages/vant/src/signature/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -107,4 +107,39 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div>
<!--[-->
<div class="van-signature">
<div class="van-signature__content">
<canvas width="0"
height="0"
>
</canvas>
</div>
<div class="van-signature__footer">
<button type="button"
class="van-button van-button--default van-button--small"
style
>
<div class="van-button__content">
<span class="van-button__text">
<!--[-->
Clear
</span>
</div>
</button>
<button type="button"
class="van-button van-button--primary van-button--small"
style
>
<div class="van-button__content">
<span class="van-button__text">
<!--[-->
Confirm
</span>
</div>
</button>
</div>
</div>
</div>
`;

30
packages/vant/src/signature/test/__snapshots__/demo.spec.ts.snap
View File

@ -91,4 +91,34 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div>
<div class="van-signature">
<div class="van-signature__content">
<canvas width="100"
height="100"
>
</canvas>
</div>
<div class="van-signature__footer">
<button type="button"
class="van-button van-button--default van-button--small"
>
<div class="van-button__content">
<span class="van-button__text">
Clear
</span>
</div>
</button>
<button type="button"
class="van-button van-button--primary van-button--small"
>
<div class="van-button__content">
<span class="van-button__text">
Confirm
</span>
</div>
</button>
</div>
</div>
</div>
`;