110 lines
11 KiB
JSON
110 lines
11 KiB
JSON
{
|
||
"curated": true,
|
||
"slug": "popconfirm",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "popconfirm-ex-1",
|
||
"title": "删除确认（底部弹出）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <span class=\"kole-popconfirm\" data-popconfirm>\n <button class=\"kole-btn danger\">删除</button>\n <div class=\"kole-popconfirm-pop placement-bottom\" hidden>\n <div class=\"kole-popconfirm-inner\">\n <span class=\"kole-popconfirm-icon\">!</span>\n <span class=\"kole-popconfirm-title\">确定要删除该条记录吗？此操作不可撤销。</span>\n </div>\n <div class=\"kole-popconfirm-actions\">\n <button class=\"kole-popconfirm-btn\" data-act=\"cancel\">取消</button>\n <button class=\"kole-popconfirm-btn primary\" data-act=\"ok\">确定</button>\n </div>\n </div>\n </span>\n <div class=\"log\" id=\"log\">结果：—</div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<span class=\"kole-popconfirm\">\n <button>删除</button>\n <div class=\"kole-popconfirm-pop placement-bottom\" hidden>\n <div class=\"kole-popconfirm-inner\">\n <span class=\"kole-popconfirm-icon\">!</span>\n <span class=\"kole-popconfirm-title\">确定要删除该条记录吗？此操作不可撤销。</span>\n </div>\n <div class=\"kole-popconfirm-actions\">\n <button class=\"kole-popconfirm-btn\">取消</button>\n <button class=\"kole-popconfirm-btn primary\">确定</button>\n </div>\n </div>\n</span>\n<div>结果：—</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo() {\n const [open, setOpen] = useState(false);\n\n return (\n <KolePopconfirm\n title=\"确定要删除该条记录吗？此操作不可撤销。\"\n placement=\"bottom\"\n okText=\"确定\"\n cancelText=\"取消\"\n visible={open}\n onConfirm={() => setOpen(false)}\n onCancel={() => setOpen(false)}\n >\n <button onClick={() => setOpen(true)}>删除</button>\n </KolePopconfirm>\n );\n}",
|
||
"vue3": "<template>\n <KolePopconfirm\n v-model=\"open\"\n title=\"确定要删除该条记录吗？此操作不可撤销。\"\n placement=\"bottom\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button @click=\"open = true\">删除</button>\n </KolePopconfirm>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst open = ref(false);\nconst onConfirm = () => { open.value = false; };\nconst onCancel = () => { open.value = false; };\n</script>",
|
||
"vue2": "<template>\n <KolePopconfirm\n v-model=\"open\"\n title=\"确定要删除该条记录吗？此操作不可撤销。\"\n placement=\"bottom\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button @click=\"open = true\">删除</button>\n </KolePopconfirm>\n</template>\n\n<script>\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n components: { KolePopconfirm },\n data() {\n return { open: false };\n },\n methods: {\n onConfirm() { this.open = false; },\n onCancel() { this.open = false; }\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [open, setOpen] = useState<boolean>(false);\n\n return (\n <KolePopconfirm\n title=\"确定要删除该条记录吗？此操作不可撤销。\"\n placement=\"bottom\"\n okText=\"确定\"\n cancelText=\"取消\"\n visible={open}\n onConfirm={() => setOpen(false)}\n onCancel={() => setOpen(false)}\n >\n <button onClick={() => setOpen(true)}>删除</button>\n </KolePopconfirm>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KolePopconfirm\n v-model=\"open\"\n title=\"确定要删除该条记录吗？此操作不可撤销。\"\n placement=\"bottom\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button @click=\"open = true\">删除</button>\n </KolePopconfirm>\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst open = ref<boolean>(false);\nconst onConfirm = () => { open.value = false; };\nconst onCancel = () => { open.value = false; };\n</script>",
|
||
"vue2ts": "<template>\n\n <KolePopconfirm\n v-model=\"open\"\n title=\"确定要删除该条记录吗？此操作不可撤销。\"\n placement=\"bottom\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button @click=\"open = true\">删除</button>\n </KolePopconfirm>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n components: { KolePopconfirm },\n data(): Record<string, unknown> {\n return { open: false };\n },\n methods: {\n onConfirm(): void { this.open = false; },\n onCancel(): void { this.open = false; }\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Popconfirm.html:28-38 的第一段气泡（placement-bottom、标题\"确定要删除该条记录吗？此操作不可撤销。\"、取消/确定按钮）与 :77-80 的确定回调；placement 取值对齐 site/details/popconfirm.json contract.dims.placement=top|bottom|left|right，受控用法对齐 frameworks/Popconfirm.jsx 的 visible/onConfirm/onCancel"
|
||
},
|
||
{
|
||
"id": "popconfirm-ex-2",
|
||
"title": "顶部弹出",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <span class=\"kole-popconfirm\" data-popconfirm>\n <button class=\"kole-btn\">提交</button>\n <div class=\"kole-popconfirm-pop placement-top\" hidden>\n <div class=\"kole-popconfirm-inner\">\n <span class=\"kole-popconfirm-icon\">!</span>\n <span class=\"kole-popconfirm-title\">确定要提交审批吗？</span>\n </div>\n <div class=\"kole-popconfirm-actions\">\n <button class=\"kole-popconfirm-btn\" data-act=\"cancel\">取消</button>\n <button class=\"kole-popconfirm-btn primary\" data-act=\"ok\">确定</button>\n </div>\n </div>\n </span>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<span class=\"kole-popconfirm\">\n <button>提交</button>\n <div class=\"kole-popconfirm-pop placement-top\" hidden>\n <div class=\"kole-popconfirm-inner\">\n <span class=\"kole-popconfirm-icon\">!</span>\n <span class=\"kole-popconfirm-title\">确定要提交审批吗？</span>\n </div>\n <div class=\"kole-popconfirm-actions\">\n <button class=\"kole-popconfirm-btn\">取消</button>\n <button class=\"kole-popconfirm-btn primary\">确定</button>\n </div>\n </div>\n</span>",
|
||
"jsx": "import { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo() {\n return (\n <KolePopconfirm\n title=\"确定要提交审批吗？\"\n placement=\"top\"\n okText=\"确定\"\n cancelText=\"取消\"\n defaultVisible\n onConfirm={() => console.log('已确认（ok）')}\n onCancel={() => console.log('已取消')}\n >\n <button>提交</button>\n </KolePopconfirm>\n );\n}",
|
||
"vue3": "<template>\n <KolePopconfirm\n title=\"确定要提交审批吗？\"\n placement=\"top\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button>提交</button>\n </KolePopconfirm>\n</template>\n\n<script setup>\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst onConfirm = () => { console.log('已确认（ok）'); };\nconst onCancel = () => { console.log('已取消'); };\n</script>",
|
||
"vue2": "<template>\n <KolePopconfirm\n title=\"确定要提交审批吗？\"\n placement=\"top\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button>提交</button>\n </KolePopconfirm>\n</template>\n\n<script>\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n components: { KolePopconfirm },\n methods: {\n onConfirm() { console.log('已确认（ok）'); },\n onCancel() { console.log('已取消'); }\n }\n};\n</script>",
|
||
"tsx": "import { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n return (\n <KolePopconfirm\n title=\"确定要提交审批吗？\"\n placement=\"top\"\n okText=\"确定\"\n cancelText=\"取消\"\n defaultVisible\n onConfirm={() => console.log('已确认（ok）')}\n onCancel={() => console.log('已取消')}\n >\n <button>提交</button>\n </KolePopconfirm>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KolePopconfirm\n title=\"确定要提交审批吗？\"\n placement=\"top\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button>提交</button>\n </KolePopconfirm>\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('顶部弹出');\nconst onConfirm = () => { console.log('已确认（ok）'); };\nconst onCancel = () => { console.log('已取消'); };\n</script>",
|
||
"vue2ts": "<template>\n\n <KolePopconfirm\n title=\"确定要提交审批吗？\"\n placement=\"top\"\n ok-text=\"确定\"\n cancel-text=\"取消\"\n @confirm=\"onConfirm\"\n @cancel=\"onCancel\"\n >\n <button>提交</button>\n </KolePopconfirm>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n components: { KolePopconfirm },\n methods: {\n onConfirm(): void { console.log('已确认（ok）'); },\n onCancel(): void { console.log('已取消'); }\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Popconfirm.html:46-56 的第二段气泡（placement-top、标题\"确定要提交审批吗？\"、取消/确定按钮，初始 hidden）；Vue 端按实现走自管开合（frameworks/Popconfirm.vue3.vue 只声明 modelValue，frameworks/Popconfirm.vue2.vue 为 value），React 端非受控默认展开态对齐 frameworks/Popconfirm.jsx 的 defaultVisible 参数"
|
||
}
|
||
]
|
||
}
|