43 lines
9.3 KiB
JSON
43 lines
9.3 KiB
JSON
{
|
||
"slug": "formmodal",
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "formmodal-ex-1",
|
||
"title": "基础用法",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-page\">\n <h2 class=\"kole-h2\">FormModal 表单弹窗</h2>\n <p class=\"kole-desc\">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n <div class=\"kole-demo\">\n <button class=\"kole-btn kole-btn--primary\" id=\"open\">新建用户</button>\n <p class=\"kole-code-tip\" id=\"out\"></p>\n </div>\n</div>\n<div class=\"kole-formmodal-mask\" id=\"mask\" style=\"display:none\">\n <div class=\"kole-formmodal\">\n <div class=\"kole-formmodal-head\">\n <span>新建用户</span>\n <button class=\"kole-formmodal-close\" id=\"close\">×</button>\n </div>\n <div class=\"kole-formmodal-body\">\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 姓名\n </label>\n <input class=\"kole-form-input\" id=\"f-name\" placeholder=\"请输入姓名\" />\n <div class=\"kole-form-err\" id=\"e-name\" style=\"display:none\">姓名不能为空</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 邮箱\n </label>\n <input class=\"kole-form-input\" id=\"f-email\" placeholder=\"name@example.com\" />\n <div class=\"kole-form-err\" id=\"e-email\" style=\"display:none\">邮箱格式不正确</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">角色</label>\n <input class=\"kole-form-input\" id=\"f-role\" placeholder=\"如：管理员\" />\n </div>\n </div>\n <div class=\"kole-formmodal-foot\">\n <button class=\"kole-btn\" id=\"cancel\">取消</button>\n <button class=\"kole-btn kole-btn--primary\" id=\"ok\">提交</button>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<h2>FormModal 表单弹窗</h2>\n<p>弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n<button>新建用户</button>\n<p></p>\n<div class=\"kole-formmodal-mask\" style=\"display:none\">\n <div class=\"kole-formmodal\">\n <div class=\"kole-formmodal-head\">\n <span>新建用户</span>\n <button class=\"kole-formmodal-close\">×</button>\n </div>\n <div class=\"kole-formmodal-body\">\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 姓名\n </label>\n <input class=\"kole-form-input\" placeholder=\"请输入姓名\" />\n <div class=\"kole-form-err\" style=\"display:none\">姓名不能为空</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 邮箱\n </label>\n <input class=\"kole-form-input\" placeholder=\"name@example.com\" />\n <div class=\"kole-form-err\" style=\"display:none\">邮箱格式不正确</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">角色</label>\n <input class=\"kole-form-input\" placeholder=\"如：管理员\" />\n </div>\n </div>\n <div class=\"kole-formmodal-foot\">\n <button>取消</button>\n <button>提交</button>\n </div>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleFormModal } from 'kole-ui/react';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default function Demo() {\n const [visible, setVisible] = useState(false);\n\n return (\n <>\n <button type=\"button\" onClick={() => setVisible(true)}>新建用户</button>\n <KoleFormModal\n visible={visible}\n title=\"新建用户\"\n fields={fields}\n onSubmit={(form) => { console.log(form); setVisible(false); }}\n onCancel={() => setVisible(false)}\n />\n </>\n );\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleFormModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nfunction onSubmit(form) { console.log(form); visible.value = false; }\nfunction close() { visible.value = false; }\n</script>\n\n<template>\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n</template>",
|
||
"vue2": "<template>\n <div>\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n </div>\n</template>\n\n<script>\nimport { KoleFormModal } from 'kole-ui/vue2';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default {\n name: 'FormModalDemo',\n components: { KoleFormModal },\n data() { return { visible: false, fields }; },\n methods: {\n onSubmit(form) { console.log(form); this.visible = false; },\n close() { this.visible = false; },\n },\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleFormModal } from 'kole-ui/react';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default function Demo(): JSX.Element {\n const [visible, setVisible] = useState<boolean>(false);\n\n return (\n <>\n <button type=\"button\" onClick={() => setVisible(true)}>新建用户</button>\n <KoleFormModal\n visible={visible}\n title=\"新建用户\"\n fields={fields}\n onSubmit={(form) => { console.log(form); setVisible(false); }}\n onCancel={() => setVisible(false)}\n />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFormModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nfunction onSubmit(form) { console.log(form); visible.value = false; }\nfunction close() { visible.value = false; }\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFormModal } from 'kole-ui/vue2';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default {\n name: 'FormModalDemo',\n components: { KoleFormModal },\n data(): Record<string, unknown> { return { visible: false, fields }; },\n methods: {\n onSubmit(form) { console.log(form); this.visible = false; },\n close(): void { this.visible = false; },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/FormModal.html:20-44 的弹窗结构（标题「新建用户」、姓名/邮箱必填并带 placeholder、角色可空、错误文案「姓名不能为空」「邮箱格式不正确」）",
|
||
"visible / title / fields / value 形参见 FormModal.jsx 与 FormModal.vue3.vue defineProps（DEFAULT_FIELDS 与演示页三个字段同值）"
|
||
]
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|