{"slug":"signaturepad","mode":"single","examples":[{"id":"signaturepad-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">SignaturePad 签名板</h2>\n  <p class=\"kole-desc\">手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-sign\" id=\"sign\">\n      <div class=\"kole-sign-pad\">\n        <canvas class=\"kole-sign-canvas\" id=\"canvas\"></canvas>\n        <div class=\"kole-sign-placeholder\" id=\"ph\">请在此处签名</div>\n      </div>\n      <div class=\"kole-sign-actions\">\n        <button class=\"kole-btn\" id=\"undo\">撤销</button>\n        <button class=\"kole-btn\" id=\"clear\">清除</button>\n        <button class=\"kole-btn kole-btn--primary\" id=\"save\">保存</button>\n        <span class=\"kole-sign-preview\" id=\"preview\"></span>\n      </div>\n    </div>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h2>SignaturePad 签名板</h2>\n<p>手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>\n<div class=\"kole-sign\" id=\"sign\">\n  <div class=\"kole-sign-pad\">\n    <canvas class=\"kole-sign-canvas\"></canvas>\n    <div class=\"kole-sign-placeholder\">请在此处签名</div>\n  </div>\n  <div class=\"kole-sign-actions\">\n    <button>撤销</button>\n    <button>清除</button>\n    <button>保存</button>\n    <span class=\"kole-sign-preview\"></span>\n  </div>\n</div>","jsx":"import { KoleSignaturePad } from 'kole-ui/react';\n\n<KoleSignaturePad />","vue3":"<template>\n  <KoleSignaturePad />\n</template>\n\n<script setup>\nimport { KoleSignaturePad } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleSignaturePad />\n</template>\n\n<script>\nimport { KoleSignaturePad } from 'kole-ui/vue2';\nexport default { components: { KoleSignaturePad } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}