# Signature 签名 ### 介绍 基于Canvas的签名组件。 ### 安装 ``` javascript import { createApp } from 'vue'; // vue import { Signature} from '@nutui/nutui'; const app = createApp(); app.use(Signature); ``` ## 代码演示 ### 基础用法1 ```html

Tips: 点击确认按钮,下方显示签名图片

``` ```javascript export default { data(){ return{ } }, methods:{ confirm(canvas, data) { let img = document.createElement('img'); img.src = data; document.querySelector('.demo').appendChild(img); }, clear() { let img = document.querySelector('.demo img'); if (img) { img.remove(); } } } } ``` ### 修改颜色和签字粗细 ```html ``` ## API ### Props | 参数 | 说明 | 类型 | 默认值 |----- | ----- | ----- | ----- | custom-class | 自定义class | String | - | line-width | 线条的宽度 | Number | 3 | stroke-style | 绘图笔触颜色 | String | '#000' | type | 图片格式 | String | 'png' | un-support-tpl | 不支持Canvas情况下的展示文案 | String | '对不起,当前浏览器不支持Canvas,无法使用本控件!' ## Event | 字段 | 说明 | 回调参数 |----- | ----- | ----- | confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI | clear | 点击重签按钮触发事件回调函数 | 无