{ "slug": "confirmmodal", "mode": "scenarios", "curated": true, "examples": [ { "id": "confirmmodal-ex-1", "title": "确认弹窗 ConfirmModal 示例 1", "titleSrc": "", "desc": "", "html": "", "preview": { "show": [ [ 2, 0 ] ], "hide": [ [ 0 ], [ 1 ], [ 3 ], [ 2, 1 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "", "jsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo() {\n const [visible, setVisible] = useState(true);\n const close = () => setVisible(false);\n\n return (\n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [visible, setVisible] = useState(true);\n const close = () => setVisible(false);\n\n return (\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/ConfirmModal.html:16-26 的 is-primary 确认块(标题「提交该申请?」、内容「提交后将进入审批流程。」、取消 + 提交按钮);prop 取 frameworks/ConfirmModal.jsx:5-8 的 visible/confirmType/title/content/confirmText/cancelText" ] }, { "id": "confirmmodal-ex-2", "title": "确认弹窗 ConfirmModal 示例 2", "titleSrc": "", "desc": "", "html": "
\n
\n !\n
删除该成员?
\n
\n
删除后该成员将无法访问系统,且不可恢复。
\n \n
\n \n \n
\n
", "preview": { "show": [ [ 2, 1 ] ], "hide": [ [ 0 ], [ 1 ], [ 3 ], [ 2, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n
\n !\n
删除该成员?
\n
\n
删除后该成员将无法访问系统,且不可恢复。
\n \n
\n \n \n
\n
", "jsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo() {\n const [visible, setVisible] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n const close = () => setVisible(false);\n const confirm = (dontAskChecked) => {\n setSubmitting(true);\n console.log('删除成员,不再提示 =', dontAskChecked);\n };\n\n return (\n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [visible, setVisible] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n const close = () => setVisible(false);\n const confirm = (dontAskChecked) => {\n setSubmitting(true);\n console.log('删除成员,不再提示 =', dontAskChecked);\n };\n\n return (\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/ConfirmModal.html:27-37 的 is-danger 块(标题「删除该成员?」、内容「删除后该成员将无法访问系统,且不可恢复。」、删除按钮);dontAsk 对应 :33 的 label.kole-confirm-extra「不再提示」勾选,loading 对应 ConfirmModal.jsx:12 的 loading 分支(按钮文案「处理中…」)" ] } ] }