40 lines
4.9 KiB
JSON
40 lines
4.9 KiB
JSON
{
|
||
"slug": "signaturepad",
|
||
"curated": true,
|
||
"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": "curated",
|
||
"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// 组件自持画布与「撤销 / 清除 / 保存」三个动作（SignaturePad.jsx 第 69-91 行），\n// 对外没有 props / emit / slot；画布尺寸随容器自适应（SignaturePad.css 第 4 行，高 180px）。\n// key 是 React 协调用的框架属性，也是该组件唯一可写的合法属性。\nexport default function ContractSignature() {\n return <KoleSignaturePad key=\"contract-sign\" />;\n}",
|
||
"vue3": "<script setup>\nimport { KoleSignaturePad } from 'kole-ui/vue3';\n</script>\n\n<template>\n <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue3.vue 第 1-13 行） -->\n <KoleSignaturePad key=\"contract-sign\" />\n</template>",
|
||
"vue2": "<template>\n <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue2.vue 第 1-14 行） -->\n <KoleSignaturePad key=\"contract-sign\" />\n</template>\n\n<script>\nimport { KoleSignaturePad } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSignaturePad }\n};\n</script>",
|
||
"tsx": "import { KoleSignaturePad } from 'kole-ui/react';\n\n// 组件自持画布与「撤销 / 清除 / 保存」三个动作（SignaturePad.jsx 第 69-91 行），\n// 对外没有 props / emit / slot；画布尺寸随容器自适应（SignaturePad.css 第 4 行，高 180px）。\n// key 是 React 协调用的框架属性，也是该组件唯一可写的合法属性。\nexport default function ContractSignature(): JSX.Element {\n return <KoleSignaturePad key=\"contract-sign\" />;\n}",
|
||
"vue3ts": "<template>\n\n <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue3.vue 第 1-13 行） -->\n <KoleSignaturePad key=\"contract-sign\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSignaturePad } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue2.vue 第 1-14 行） -->\n <KoleSignaturePad key=\"contract-sign\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSignaturePad } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSignaturePad },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/SignaturePad.html 第 16-27 行的真实结构：画布 .kole-sign-canvas + 占位「请在此处签名」+「撤销 / 清除 / 保存」三个按钮，第 49-70 行是鼠标与触屏绘制、撤销、清除、保存（回显「已导出（W×H）」）的实现；四端实现对应 frameworks/SignaturePad.jsx 第 69-91 行、SignaturePad.vue3.vue 第 1-13 行。",
|
||
"该组件对外没有 props / emit / slot（site/details/signaturepad.json 的 contract.dims 只有 state、device 两个内部状态轴，四端均未暴露对应 prop），所以调用形态就是不带业务属性的空属性调用；片段只补一个白名单内的框架属性 key（React/Vue 协调用），以免与生成器兜底的零信息量骨架同形。"
|
||
]
|
||
}
|
||
]
|
||
}
|