import{e as s,o as a,G as n}from"./vendor.js";const e={class:"markdown-body"},r=n(`
signature\u7EC4\u4EF6
\u4ECB\u7ECD
\u57FA\u4E8ECanvas\u7684\u7B7E\u540D\u7EC4\u4EF6\u3002
\u5B89\u88C5
import { createApp } from 'vue';
import { Signature} from '@nutui/nutui';
const app = createApp();
app.use(Signature);
\u4EE3\u7801\u6F14\u793A
\u4FEE\u6539\u989C\u8272\u548C\u7B7E\u5B57\u7C97\u7EC6
<div class="demo">
<nut-signature
:lineWidth="lineWidth"
:strokeStyle="strokeStyle"
@confirm="confirm"
@clear="clear"
/>
</div>
setup() {
const state = reactive({
lineWidth: 4,
strokeStyle: 'green',
testimg: ''
});
const clear = () => {
console.log('\u6E05\u9664\u4E8B\u4EF6');
};
const confirm = (data: any) => {
console.log('\u56FE\u7247\u5730\u5740', data);
Taro.saveImageToPhotosAlbum({
filePath: \`\${data}\`,
success(res) {
Taro.showToast({
title: '\u4FDD\u5B58\u6210\u529F'
});
},
fail(err) {
Taro.showToast({
title: '\u4FDD\u5B58\u5931\u8D25'
});
}
});
};
return { ...state, confirm, clear };
}
API
Props
| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
|---|
| custom-class | \u81EA\u5B9A\u4E49class | String | - |
| line-width | \u7EBF\u6761\u7684\u5BBD\u5EA6 | Number | 3 |
| stroke-style | \u7ED8\u56FE\u7B14\u89E6\u989C\u8272 | String | \u2018#000\u2019 |
| type | \u56FE\u7247\u683C\u5F0F | String | \u2018png\u2019 |
| un-support-tpl | \u4E0D\u652F\u6301Canvas\u60C5\u51B5\u4E0B\u7684\u5C55\u793A\u6587\u6848 | String | \u2018\u5BF9\u4E0D\u8D77\uFF0C\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301Canvas\uFF0C\u65E0\u6CD5\u4F7F\u7528\u672C\u63A7\u4EF6\uFF01\u2019 |
Event
| \u5B57\u6BB5 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
|---|
| confirm | \u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u89E6\u53D1\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570 | data URI |
| clear | \u70B9\u51FB\u91CD\u7B7E\u6309\u94AE\u89E6\u53D1\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570 | \u65E0 |
`,13),d=[r],i={setup(l,{expose:t}){return t({frontmatter:{}}),(p,c)=>(a(),s("div",e,d))}};export{i as default};