100 lines
12 KiB
JSON
100 lines
12 KiB
JSON
{
|
|
"slug": "confirmmodal",
|
|
"mode": "scenarios",
|
|
"curated": true,
|
|
"examples": [
|
|
{
|
|
"id": "confirmmodal-ex-1",
|
|
"title": "确认弹窗 ConfirmModal 示例 1",
|
|
"titleSrc": "",
|
|
"desc": "",
|
|
"html": "<div class=\"kole-confirm is-primary\" id=\"confirmPrimary\" hidden>\n <div class=\"kole-confirm-head\">\n <span class=\"kole-confirm-icon\">i</span>\n <div class=\"kole-confirm-title\">提交该申请？</div>\n </div>\n <div class=\"kole-confirm-content\">提交后将进入审批流程。</div>\n <div class=\"kole-confirm-footer\">\n <button class=\"kole-confirm-btn\" id=\"cancelPrimary\">取消</button>\n <button class=\"kole-confirm-btn primary\" id=\"okPrimary\">提交</button>\n </div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
2,
|
|
0
|
|
]
|
|
],
|
|
"hide": [
|
|
[
|
|
0
|
|
],
|
|
[
|
|
1
|
|
],
|
|
[
|
|
3
|
|
],
|
|
[
|
|
2,
|
|
1
|
|
]
|
|
],
|
|
"mode": "scenarios"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-confirm is-primary\" hidden>\n <div class=\"kole-confirm-head\">\n <span class=\"kole-confirm-icon\">i</span>\n <div class=\"kole-confirm-title\">提交该申请？</div>\n </div>\n <div class=\"kole-confirm-content\">提交后将进入审批流程。</div>\n <div class=\"kole-confirm-footer\">\n <button class=\"kole-confirm-btn\">取消</button>\n <button class=\"kole-confirm-btn primary\">提交</button>\n </div>\n</div>",
|
|
"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 <KoleConfirmModal\n visible={visible}\n confirmType=\"primary\"\n title=\"提交该申请？\"\n content=\"提交后将进入审批流程。\"\n confirmText=\"提交\"\n cancelText=\"取消\"\n onConfirm={close}\n onCancel={close}\n />\n );\n}",
|
|
"vue3": "<template>\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"primary\"\n title=\"提交该申请？\"\n content=\"提交后将进入审批流程。\"\n confirm-text=\"提交\"\n cancel-text=\"取消\"\n @confirm=\"close\"\n @cancel=\"close\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref(true);\n\nfunction close() {\n visible.value = false;\n}\n</script>",
|
|
"vue2": "<template>\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"primary\"\n title=\"提交该申请？\"\n content=\"提交后将进入审批流程。\"\n confirm-text=\"提交\"\n cancel-text=\"取消\"\n @confirm=\"close\"\n @cancel=\"close\"\n />\n</template>\n\n<script>\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleConfirmModal },\n data() {\n return { visible: true };\n },\n methods: {\n close() {\n this.visible = false;\n },\n },\n};\n</script>",
|
|
"tsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [visible, setVisible] = useState<boolean>(true);\n const close = () => setVisible(false);\n\n return (\n <KoleConfirmModal\n visible={visible}\n confirmType=\"primary\"\n title=\"提交该申请？\"\n content=\"提交后将进入审批流程。\"\n confirmText=\"提交\"\n cancelText=\"取消\"\n onConfirm={close}\n onCancel={close}\n />\n );\n}",
|
|
"vue3ts": "<template>\n\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"primary\"\n title=\"提交该申请？\"\n content=\"提交后将进入审批流程。\"\n confirm-text=\"提交\"\n cancel-text=\"取消\"\n @confirm=\"close\"\n @cancel=\"close\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(true);\n\nfunction close() {\n visible.value = false;\n}\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"primary\"\n title=\"提交该申请？\"\n content=\"提交后将进入审批流程。\"\n confirm-text=\"提交\"\n cancel-text=\"取消\"\n @confirm=\"close\"\n @cancel=\"close\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleConfirmModal },\n data(): Record<string, unknown> {\n return { visible: true };\n },\n methods: {\n close(): void {\n this.visible = false;\n },\n },\n};\n</script>"
|
|
},
|
|
"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": "<div class=\"kole-confirm is-danger\">\n <div class=\"kole-confirm-head\">\n <span class=\"kole-confirm-icon\">!</span>\n <div class=\"kole-confirm-title\">删除该成员？</div>\n </div>\n <div class=\"kole-confirm-content\">删除后该成员将无法访问系统，且不可恢复。</div>\n <label class=\"kole-confirm-extra\">\n <input id=\"dont\" type=\"checkbox\" />\n 不再提示\n </label>\n <div class=\"kole-confirm-footer\">\n <button class=\"kole-confirm-btn\" id=\"cancel\">取消</button>\n <button class=\"kole-confirm-btn danger\" id=\"ok\">删除</button>\n </div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
2,
|
|
1
|
|
]
|
|
],
|
|
"hide": [
|
|
[
|
|
0
|
|
],
|
|
[
|
|
1
|
|
],
|
|
[
|
|
3
|
|
],
|
|
[
|
|
2,
|
|
0
|
|
]
|
|
],
|
|
"mode": "scenarios"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-confirm is-danger\">\n <div class=\"kole-confirm-head\">\n <span class=\"kole-confirm-icon\">!</span>\n <div class=\"kole-confirm-title\">删除该成员？</div>\n </div>\n <div class=\"kole-confirm-content\">删除后该成员将无法访问系统，且不可恢复。</div>\n <label class=\"kole-confirm-extra\">\n <input type=\"checkbox\" />\n 不再提示\n </label>\n <div class=\"kole-confirm-footer\">\n <button class=\"kole-confirm-btn\">取消</button>\n <button class=\"kole-confirm-btn danger\">删除</button>\n </div>\n</div>",
|
|
"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 <KoleConfirmModal\n visible={visible}\n confirmType=\"danger\"\n title=\"删除该成员？\"\n content=\"删除后该成员将无法访问系统，且不可恢复。\"\n confirmText=\"删除\"\n cancelText=\"取消\"\n dontAsk\n loading={submitting}\n onConfirm={confirm}\n onCancel={close}\n />\n );\n}",
|
|
"vue3": "<template>\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"danger\"\n title=\"删除该成员？\"\n content=\"删除后该成员将无法访问系统，且不可恢复。\"\n confirm-text=\"删除\"\n cancel-text=\"取消\"\n dont-ask\n :loading=\"submitting\"\n @confirm=\"confirm\"\n @cancel=\"close\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref(true);\nconst submitting = ref(false);\n\nfunction confirm(dontAskChecked) {\n submitting.value = true;\n console.log('删除成员，不再提示 =', dontAskChecked);\n}\n\nfunction close() {\n visible.value = false;\n}\n</script>",
|
|
"vue2": "<template>\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"danger\"\n title=\"删除该成员？\"\n content=\"删除后该成员将无法访问系统，且不可恢复。\"\n confirm-text=\"删除\"\n cancel-text=\"取消\"\n dont-ask\n :loading=\"submitting\"\n @confirm=\"confirm\"\n @cancel=\"close\"\n />\n</template>\n\n<script>\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleConfirmModal },\n data() {\n return { visible: true, submitting: false };\n },\n methods: {\n confirm(dontAskChecked) {\n this.submitting = true;\n console.log('删除成员，不再提示 =', dontAskChecked);\n },\n close() {\n this.visible = false;\n },\n },\n};\n</script>",
|
|
"tsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [visible, setVisible] = useState<boolean>(true);\n const [submitting, setSubmitting] = useState<boolean>(false);\n const close = () => setVisible(false);\n const confirm = (dontAskChecked) => {\n setSubmitting(true);\n console.log('删除成员，不再提示 =', dontAskChecked);\n };\n\n return (\n <KoleConfirmModal\n visible={visible}\n confirmType=\"danger\"\n title=\"删除该成员？\"\n content=\"删除后该成员将无法访问系统，且不可恢复。\"\n confirmText=\"删除\"\n cancelText=\"取消\"\n dontAsk\n loading={submitting}\n onConfirm={confirm}\n onCancel={close}\n />\n );\n}",
|
|
"vue3ts": "<template>\n\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"danger\"\n title=\"删除该成员？\"\n content=\"删除后该成员将无法访问系统，且不可恢复。\"\n confirm-text=\"删除\"\n cancel-text=\"取消\"\n dont-ask\n :loading=\"submitting\"\n @confirm=\"confirm\"\n @cancel=\"close\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(true);\nconst submitting = ref<boolean>(false);\n\nfunction confirm(dontAskChecked) {\n submitting.value = true;\n console.log('删除成员，不再提示 =', dontAskChecked);\n}\n\nfunction close() {\n visible.value = false;\n}\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleConfirmModal\n :visible=\"visible\"\n confirm-type=\"danger\"\n title=\"删除该成员？\"\n content=\"删除后该成员将无法访问系统，且不可恢复。\"\n confirm-text=\"删除\"\n cancel-text=\"取消\"\n dont-ask\n :loading=\"submitting\"\n @confirm=\"confirm\"\n @cancel=\"close\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleConfirmModal },\n data(): Record<string, unknown> {\n return { visible: true, submitting: false };\n },\n methods: {\n confirm(dontAskChecked) {\n this.submitting = true;\n console.log('删除成员，不再提示 =', dontAskChecked);\n },\n close(): void {\n this.visible = false;\n },\n },\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/ConfirmModal.html:27-37 的 is-danger 块（标题「删除该成员？」、内容「删除后该成员将无法访问系统，且不可恢复。」、删除按钮）；dontAsk 对应 :33 的 label.kole-confirm-extra「不再提示」勾选，loading 对应 ConfirmModal.jsx:12 的 loading 分支（按钮文案「处理中…」）"
|
|
]
|
|
}
|
|
]
|
|
}
|