import{e as s,o as a,G as t}from"./vendor.6bc94963.js";const n={class:"markdown-body"},l=[t('

signature组件

介绍

基于Canvas的签名组件。\n

安装

import { createApp } from 'vue';\n// vue\nimport { Signature} from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Signature);\n\n

代码演示

基础用法1

<nut-signature  \n    @confirm="confirm" \n    @clear="clear"\n></nut-signature>\n<p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>\n

export default {\n    data(){\n        return{\n        }\n    },\n    methods:{\n        confirm(canvas, data) {\n            let img = document.createElement('img');\n            img.src = data;\n            document.querySelector('.demo').appendChild(img);\n        },\n\n        clear() {\n            let img = document.querySelector('.demo img'); \n            if (img) {\n                img.remove();\n            }\n        }\n    }\n}\n

修改颜色和签字粗细

<nut-signature  \n    :lineWidth="lineWidth" \n    :strokeStyle="strokeStyle"\n></nut-signature>\n\n

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	点击重签按钮触发事件回调函数	无

',16)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};