| 1 |
- import{e as t,o as s,G as a}from"./vendor.92dabd7f.js";const n={class:"markdown-body"},e=[a('<h1>signature组件</h1><h3>介绍</h3><pre><code>基于Canvas的签名组件。\n</code></pre><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Signature} <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Signature);\n\n</code></pre><h2>代码演示</h2><h3>修改颜色和签字粗细</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-signature</span>\n <span class="hljs-attr">:lineWidth</span>=<span class="hljs-string">"lineWidth"</span>\n <span class="hljs-attr">:strokeStyle</span>=<span class="hljs-string">"strokeStyle"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"confirm"</span>\n @<span class="hljs-attr">clear</span>=<span class="hljs-string">"clear"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">div</span>></span>\nsetup() {\n const state = reactive({\n lineWidth: 4,\n strokeStyle: 'green',\n testimg: ''\n });\n const clear = () => {\n console.log('清除事件');\n };\n const confirm = (data: any) => {\n console.log('图片地址', data);\n Taro.saveImageToPhotosAlbum({\n filePath: `${data}`,\n success(res) {\n Taro.showToast({\n title: '保存成功'\n });\n },\n fail(err) {\n Taro.showToast({\n title: '保存失败'\n });\n }\n });\n };\n return { ...state, confirm, clear };\n }\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>custom-class</td><td>自定义class</td><td>String</td><td>-</td></tr><tr><td>line-width</td><td>线条的宽度</td><td>Number</td><td>3</td></tr><tr><td>stroke-style</td><td>绘图笔触颜色</td><td>String</td><td>‘#000’</td></tr><tr><td>type</td><td>图片格式</td><td>String</td><td>‘png’</td></tr><tr><td>un-support-tpl</td><td>不支持Canvas情况下的展示文案</td><td>String</td><td>‘对不起，当前浏览器不支持Canvas，无法使用本控件！’</td></tr></tbody></table><h2>Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>confirm</td><td>点击确认按钮触发事件回调函数</td><td>data URI</td></tr><tr><td>clear</td><td>点击重签按钮触发事件回调函数</td><td>无</td></tr></tbody></table>',13)],r={setup:(a,{expose:r})=>(r({frontmatter:{}}),(a,r)=>(s(),t("div",n,e)))};export{r as default};
|
