149 lines
3.9 KiB
Markdown
149 lines
3.9 KiB
Markdown
# Signature 签名
|
||
|
||
### 介绍
|
||
|
||
用于签名场景的组件，基于 Canvas 实现。请升级 `vant` 到 >= 4.3.0 版本来使用该组件。
|
||
|
||
### 引入
|
||
|
||
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
|
||
|
||
```js
|
||
import { createApp } from 'vue';
|
||
import { Signature } from 'vant';
|
||
|
||
const app = createApp();
|
||
app.use(Signature);
|
||
```
|
||
|
||
## 代码演示
|
||
|
||
### 基础用法
|
||
|
||
当点击确认按钮时，组件会触发 `submit` 事件，事件的第一个参数为 `data`，包含以下字段：
|
||
|
||
- `image`：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
|
||
- `canvas`：Canvas 元素。
|
||
|
||
```html
|
||
<van-signature @submit="onSubmit" @clear="onClear" />
|
||
<van-image v-if="image" :src="image" />
|
||
```
|
||
|
||
```js
|
||
import { ref } from 'vue';
|
||
import { showToast } from 'vant';
|
||
|
||
export default {
|
||
setup() {
|
||
const image = ref('');
|
||
const onSubmit = (data) => {
|
||
image.value = data.image;
|
||
};
|
||
const onClear = () => showToast('clear');
|
||
|
||
return {
|
||
image,
|
||
onSubmit,
|
||
onClear,
|
||
};
|
||
},
|
||
};
|
||
```
|
||
|
||
### 自定义颜色
|
||
|
||
通过 `pen-color` 来自定义笔触颜色。
|
||
|
||
```html
|
||
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
|
||
```
|
||
|
||
### 自定义线宽
|
||
|
||
通过 `line-width` 来自定义线条宽度。
|
||
|
||
```html
|
||
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
|
||
```
|
||
|
||
### 自定义背景颜色
|
||
|
||
通过 `background-color` 来自定义背景颜色。
|
||
|
||
```html
|
||
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />
|
||
```
|
||
|
||
## API
|
||
|
||
### Props
|
||
|
||
| 参数 | 说明 | 类型 | 默认值 |
|
||
| --- | --- | --- | --- |
|
||
| type | 导出图片类型 | _string_ | `png` |
|
||
| pen-color | 笔触颜色，默认黑色 | _string_ | `#000` |
|
||
| line-width | 线条宽度 | _number_ | `3` |
|
||
| background-color | 背景颜色 | _string_ | - |
|
||
| tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - |
|
||
| clear-button-text | 清除按钮文案 | _string_ | `清空` |
|
||
| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
|
||
|
||
### Events
|
||
|
||
| 事件名 | 说明 | 回调参数 |
|
||
| --- | --- | --- |
|
||
| start | 开始签名时触发 | - |
|
||
| end | 结束签名时触发 | - |
|
||
| signing | 签名过程中触发 | _event: TouchEvent_ |
|
||
| submit | 点击确定按钮时触发 | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
||
| clear | 点击取消按钮时触发 | - |
|
||
|
||
### Slots
|
||
|
||
| 名称 | 说明 | 参数 |
|
||
| ---- | -------------- | ---- |
|
||
| tips | 自定义提示文案 | - |
|
||
|
||
### 方法
|
||
|
||
通过 ref 可以获取到 Signature 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
|
||
|
||
| 方法名 | 说明 | 参数 | 返回值 |
|
||
| --- | --- | --- | --- |
|
||
| resize `v4.7.3` | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
|
||
| clear `v4.8.6` | 可调用此方法来清除签名 | - | - |
|
||
| submit `v4.8.6` | 触发 `submit` 事件，与点击确认按钮的效果等价 | - | - |
|
||
|
||
### 类型定义
|
||
|
||
组件导出以下类型定义：
|
||
|
||
```ts
|
||
import type { SignatureProps, SignatureInstance } from 'vant';
|
||
```
|
||
|
||
`SignatureInstance` 是组件实例的类型，用法如下：
|
||
|
||
```ts
|
||
import { ref } from 'vue';
|
||
import type { SignatureInstance } from 'vant';
|
||
|
||
const signatureRef = ref<SignatureInstance>();
|
||
|
||
signatureRef.value?.resize();
|
||
```
|
||
|
||
## 主题定制
|
||
|
||
### 样式变量
|
||
|
||
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
||
|
||
| 名称 | 默认值 | 描述 |
|
||
| --- | --- | --- |
|
||
| --van-signature-padding | _var(--van-padding-xs)_ | - |
|
||
| --van-signature-content-height | _200px_ | 画布高度 |
|
||
| --van-signature-content-background | _var(--van-background-2)_ | 画布背景色 |
|
||
| --van-signature-content-border | _1px dotted #dadada_ | 画布边框样式 |
|