# 手写签名 组件

## 介绍

手写签名组件，用于获取用户手写签名图片。

签名图片将在用户点击确认时作为[confirm](#Events)事件的回调参数，
以 base64DataURL 的形式传递给父组件，默认格式为 png。

## 引入

```js
import { Vue } from "vue";
import { Signature } from "@bingoit/mobile-ui";

Vue.use(Signature);
```

## 代码演示

### 基础用法

```html
<template>
    <bgo-signature @confirm="signature = $event">
        <template v-slot:trigger>
            <van-button>点击签名</van-button>
        </template>
    </bgo-signature>

    <img :src="signature" />
</template>

<script>
    export default {
        data() {
            return {
                signature: ""
            };
        }
    };
</script>
```

## API

### Props

| 名称                  | 说明                                                                                          | 类型     | 可选值                                         | 默认值      |
| --------------------- | --------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------- | ----------- |
| signature-pad-options | signature_pad 选项对象，详见 [signature_pad](https://github.com/szimek/signature_pad#options) | _object_ | -                                              | `{}`        |
| data-url-type         | 获取到的签名图片格式                                                                          | _string_ | `image/png` \| `image/jpeg` | `image/png` |

[1]： 如果 `data-url-type` 指定为 `image/jpeg`，那么需要在 `signature-pad-options` 
中配置 `backgroundColor` 。否则最终得到的签名图片会是全黑的，因为 jpeg 格式不支持 alpha 通道

### Slots

| 名称    | 说明                   |
| ------- | ---------------------- |
| trigger | 触发器，点击打开签名框 |

### Events

| 事件    | 说明                 | 回调参数                |
| ------- | -------------------- | ----------------------- |
| cancel  | 点击取消按钮触发事件 | -                       |
| confirm | 点击确认签名触发事件 | _base64DataURL: string_ |

### Methods

| 方法                    | 说明                    | 参数 |
| ----------------------- | ----------------------- | ---- |
| openSign                | 打开手写签名框          | -    |
| getSignaturePadInstance | 获取 signature_pad 实例 | -    |
| getCanvas               | 获取 canvas DOM 对象    | -    |