ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: 0bf8211ff4
ブランチ タグ
nutui
/
3.1.5
/
doc.6496b28d.js

doc.6496b28d.js 4.1 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as t}from"./vendor.6bc94963.js";const n={class:"markdown-body"},l=[t('<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">&#39;vue&#39;</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">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Signature);\n\n</code></pre><h2>代码演示</h2><h3>基础用法1</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-signature</span>  \n    @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span> \n    @<span class="hljs-attr">clear</span>=<span class="hljs-string">&quot;clear&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-signature</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;demo-tips demo&quot;</span>&gt;</span>Tips: 点击确认按钮,下方显示签名图片<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n    <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>{\n        <span class="hljs-keyword">return</span>{\n        }\n    },\n    <span class="hljs-attr">methods</span>:{\n        <span class="hljs-function"><span class="hljs-title">confirm</span>(<span class="hljs-params">canvas, data</span>)</span> {\n            <span class="hljs-keyword">let</span> img = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#39;img&#39;</span>);\n            img.src = data;\n            <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#39;.demo&#39;</span>).appendChild(img);\n        },\n\n        <span class="hljs-function"><span class="hljs-title">clear</span>(<span class="hljs-params"></span>)</span> {\n            <span class="hljs-keyword">let</span> img = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#39;.demo img&#39;</span>); \n            <span class="hljs-keyword">if</span> (img) {\n                img.remove();\n            }\n        }\n    }\n}\n</code></pre><h3>修改颜色和签字粗细</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-signature</span>  \n    <span class="hljs-attr">:lineWidth</span>=<span class="hljs-string">&quot;lineWidth&quot;</span> \n    <span class="hljs-attr">:strokeStyle</span>=<span class="hljs-string">&quot;strokeStyle&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-signature</span>&gt;</span>\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>canvas和签名图片展示的 data URI</td></tr><tr><td>clear</td><td>点击重签按钮触发事件回调函数</td><td>无</td></tr></tbody></table>',16)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.