{"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":"demo-mapped","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 { KolePopconfirm } from 'kole-ui/react';\n\n<>\n<KolePopconfirm placement=\"bottom\">删除</KolePopconfirm>\n</>","vue3":"import { KolePopconfirm } from 'kole-ui/vue3';\n\n<template>\n<KolePopconfirm placement=\"bottom\">删除</KolePopconfirm>\n</template>","vue2":"import { KolePopconfirm } from 'kole-ui/vue2';\n\n<template>\n<KolePopconfirm placement=\"bottom\">删除</KolePopconfirm>\n</template>"},"notes":[]},{"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":"demo-mapped","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\n<>\n<KolePopconfirm placement=\"top\">提交</KolePopconfirm>\n</>","vue3":"import { KolePopconfirm } from 'kole-ui/vue3';\n\n<template>\n<KolePopconfirm placement=\"top\">提交</KolePopconfirm>\n</template>","vue2":"import { KolePopconfirm } from 'kole-ui/vue2';\n\n<template>\n<KolePopconfirm placement=\"top\">提交</KolePopconfirm>\n</template>"},"notes":[]}]}