mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
chore(Signature): rename filePath param to image (#11806)
This commit is contained in:
neverland
GitHub
parent
8f54235eea
commit
0f47224b46
@ -20,31 +20,32 @@ app.use(Signature);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
When the confirm button is clicked, the component will emit the `submit` event. The first parameter of the event is `data`, which contains the following fields:
|
||||
|
||||
- `image`: The image corresponding to the signature, which is in base64 string format. Returns an empty string if the signature is empty.
|
||||
- `canvas`: The Canvas element.
|
||||
|
||||
```html
|
||||
<van-signature @submit="onSubmit" @clear="onClear" />
|
||||
<van-image v-if="demoUrl" :src="demoUrl" />
|
||||
<van-image v-if="image" :src="image" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const demoUrl = ref('');
|
||||
|
||||
const image = ref('');
|
||||
const onSubmit = (data) => {
|
||||
const { filePath, canvas } = data;
|
||||
demoUrl.value = filePath;
|
||||
|
||||
console.log('submit', canvas, filePath);
|
||||
image.value = data.image;
|
||||
};
|
||||
|
||||
const onClear = () => console.log('clear');
|
||||
const onClear = () => showToast('clear');
|
||||
|
||||
return {
|
||||
image,
|
||||
onSubmit,
|
||||
onClear,
|
||||
demoUrl,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -52,12 +53,16 @@ export default {
|
||||
|
||||
### Pen Color
|
||||
|
||||
Use `pen-color` prop to set the color of the brush stroke.
|
||||
|
||||
```html
|
||||
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
|
||||
```
|
||||
|
||||
### LineWidth
|
||||
|
||||
Use `line-width` prop to set the width of the line.
|
||||
|
||||
```html
|
||||
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
|
||||
```
|
||||
@ -79,11 +84,11 @@ export default {
|
||||
|
||||
| Event Name | Description | Callback Parameters |
|
||||
| --- | --- | --- |
|
||||
| start | Callback for start of signature | - |
|
||||
| end | Callback for end of signature | - |
|
||||
| signing | Callback for signature in progress | _event: TouchEvent_ |
|
||||
| submit | submit button click | _data: {canvas: HTMLCanvasElement, filePath: string}_ |
|
||||
| clear | clear button click | - |
|
||||
| start | Emitted when signing starts | - |
|
||||
| end | Emitted when signing ends | - |
|
||||
| signing | Emitted when signing | _event: TouchEvent_ |
|
||||
| submit | Emitted when clicking the confirm button | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
||||
| clear | Emitted when clicking the cancel button | - |
|
||||
|
||||
### Types
|
||||
|
||||
|
||||
@ -20,31 +20,32 @@ app.use(Signature);
|
||||
|
||||
### 基础用法
|
||||
|
||||
当点击确认按钮时，组件会触发 `submit` 事件，事件的第一个参数为 `data`，包含以下字段：
|
||||
|
||||
- `image`：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
|
||||
- `canvas`：Canvas 元素。
|
||||
|
||||
```html
|
||||
<van-signature @submit="onSubmit" @clear="onClear" />
|
||||
<van-image v-if="demoUrl" :src="demoUrl" />
|
||||
<van-image v-if="image" :src="image" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const demoUrl = ref('');
|
||||
|
||||
const image = ref('');
|
||||
const onSubmit = (data) => {
|
||||
const { filePath, canvas } = data;
|
||||
demoUrl.value = filePath;
|
||||
|
||||
console.log('submit', canvas, filePath);
|
||||
image.value = data.image;
|
||||
};
|
||||
|
||||
const onClear = () => console.log('clear');
|
||||
const onClear = () => showToast('clear');
|
||||
|
||||
return {
|
||||
image,
|
||||
onSubmit,
|
||||
onClear,
|
||||
demoUrl,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -52,12 +53,16 @@ export default {
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过 `pen-color` 来自定义笔触颜色。
|
||||
|
||||
```html
|
||||
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
|
||||
```
|
||||
|
||||
### 自定义线宽
|
||||
|
||||
通过 `line-width` 来自定义线条宽度。
|
||||
|
||||
```html
|
||||
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
|
||||
```
|
||||
@ -79,11 +84,11 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| start | 签名开始事件回调 | - |
|
||||
| end | 签名结束事件回调 | - |
|
||||
| signing | 签名过程事件回调 | _event: TouchEvent_ |
|
||||
| submit | 确定按钮事件回调 | _data: {canvas: HTMLCanvasElement, filePath: string}_ |
|
||||
| clear | 取消按钮事件回调 | - |
|
||||
| start | 开始签名时触发 | - |
|
||||
| end | 结束签名时触发 | - |
|
||||
| signing | 签名过程中触发 | _event: TouchEvent_ |
|
||||
| submit | 点击确定按钮时触发 | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
||||
| clear | 点击取消按钮时触发 | - |
|
||||
|
||||
### 类型定义
|
||||
|
||||
|
||||
@ -104,7 +104,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const isEmpty = isCanvasEmpty(canvas);
|
||||
const filePath = isEmpty
|
||||
const image = isEmpty
|
||||
? ''
|
||||
: canvas.toDataURL(
|
||||
`image/${props.type}`,
|
||||
@ -112,8 +112,8 @@ export default defineComponent({
|
||||
);
|
||||
|
||||
emit('submit', {
|
||||
canvas: isEmpty ? null : canvas,
|
||||
filePath,
|
||||
image,
|
||||
canvas,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import { ref } from 'vue';
|
||||
import VanSignature from '..';
|
||||
import VanImage from '../../image';
|
||||
import { useTranslate } from '../../../docs/site';
|
||||
import { showToast } from '../../toast';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
@ -20,50 +21,24 @@ const t = useTranslate({
|
||||
const demoUrl = ref('');
|
||||
|
||||
const onSubmit = (data) => {
|
||||
const { filePath, canvas } = data;
|
||||
demoUrl.value = filePath;
|
||||
|
||||
console.log('submit', canvas, filePath);
|
||||
demoUrl.value = data.image;
|
||||
};
|
||||
|
||||
const onStart = () => console.log('start');
|
||||
const onClear = () => console.log('clear');
|
||||
const onEnd = () => console.log('end');
|
||||
const onSigning = (e) => console.log('signing', e);
|
||||
const onClear = () => showToast('clear');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('basic')">
|
||||
<van-signature
|
||||
@submit="onSubmit"
|
||||
@clear="onClear"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
@signing="onSigning"
|
||||
/>
|
||||
<van-signature @submit="onSubmit" @clear="onClear" />
|
||||
</demo-block>
|
||||
|
||||
<van-image v-if="demoUrl" :src="demoUrl" />
|
||||
|
||||
<demo-block :title="t('penColor')">
|
||||
<van-signature
|
||||
pen-color="#ff0000"
|
||||
@clear="onClear"
|
||||
@submit="onSubmit"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
@signing="onSigning"
|
||||
/>
|
||||
<van-signature pen-color="#ff0000" @clear="onClear" @submit="onSubmit" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('lineWidth')">
|
||||
<van-signature
|
||||
:line-width="6"
|
||||
@clear="onClear"
|
||||
@submit="onSubmit"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
@signing="onSigning"
|
||||
/>
|
||||
<van-signature :line-width="6" @clear="onClear" @submit="onSubmit" />
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
@ -47,16 +47,16 @@ test('submit() should output a valid canvas', async () => {
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
wrapper.vm.$emit('submit', { canvas: null, filePath: '' });
|
||||
wrapper.vm.$emit('submit', { canvas: null, image: '' });
|
||||
|
||||
const emitted = wrapper.emitted();
|
||||
expect(emitted.submit).toBeTruthy();
|
||||
const [data] = emitted.submit[0] as [
|
||||
{ canvas: HTMLCanvasElement | null; filePath: string }
|
||||
{ canvas: HTMLCanvasElement | null; image: string }
|
||||
];
|
||||
|
||||
expect(data.canvas).toBeNull();
|
||||
expect(data.filePath).toBe('');
|
||||
expect(data.image).toBe('');
|
||||
});
|
||||
|
||||
test('should render tips correctly', async () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user