{"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":"api-derived","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 { KoleFormModal } from 'kole-ui/react';\n\n<KoleFormModal />","vue3":"<template>\n  <KoleFormModal />\n</template>\n\n<script setup>\nimport { KoleFormModal } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleFormModal />\n</template>\n\n<script>\nimport { KoleFormModal } from 'kole-ui/vue2';\nexport default { components: { KoleFormModal } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}