{
 "slug": "alertmodal",
 "mode": "single",
 "examples": [
  {
   "id": "alertmodal-ex-1",
   "title": "查看提示",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button id=\"open\" data-type=\"info\">查看提示</button>\n<button id=\"openSuccess\" data-type=\"success\">成功提示</button>\n<button id=\"openError\" data-type=\"error\">操作失败</button>\n<button id=\"openWarning\" data-type=\"warning\">警告提示</button>\n<div class=\"kole-modal-mask\" id=\"mask\" style=\"display:none\">\n  <div class=\"kole-alert\" id=\"alertBox\">\n    <div class=\"kole-alert-head\">\n      <span class=\"kole-alert-icon\">i</span>\n      <div class=\"kole-alert-title\">系统升级通知</div>\n    </div>\n    <div class=\"kole-alert-content\">本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。</div>\n    <div class=\"kole-alert-footer\">\n      <button class=\"kole-alert-btn\" id=\"ok\">知道了</button>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button data-type=\"info\">查看提示</button>\n<button data-type=\"success\">成功提示</button>\n<button data-type=\"error\">操作失败</button>\n<button data-type=\"warning\">警告提示</button>\n<div class=\"kole-modal-mask\" style=\"display:none\">\n  <div class=\"kole-alert\">\n    <div class=\"kole-alert-head\">\n      <span class=\"kole-alert-icon\">i</span>\n      <div class=\"kole-alert-title\">系统升级通知</div>\n    </div>\n    <div class=\"kole-alert-content\">本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。</div>\n    <div class=\"kole-alert-footer\">\n      <button class=\"kole-alert-btn\">知道了</button>\n    </div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleAlertModal } from 'kole-ui/react';\n\nconst CASES = [\n  { type: 'info', label: '查看提示', title: '系统升级通知' },\n  { type: 'success', label: '成功提示', title: '操作成功' },\n  { type: 'error', label: '操作失败', title: '操作失败' },\n  { type: 'warning', label: '警告提示', title: '警告提示' },\n];\n\nexport default function AlertModalDemo() {\n  const [visible, setVisible] = useState(false);\n  const [type, setType] = useState('info');\n  const current = CASES.filter(function (c) { return c.type === type; })[0];\n\n  function open(nextType) {\n    setType(nextType);\n    setVisible(true);\n  }\n  function close() {\n    setVisible(false);\n  }\n\n  return (\n    <>\n      {CASES.map(function (c) {\n        return (\n          <button key={c.type} type=\"button\" onClick={function () { open(c.type); }}>\n            {c.label}\n          </button>\n        );\n      })}\n      <KoleAlertModal\n        visible={visible}\n        type={type}\n        title={current ? current.title : '提示'}\n        content=\"本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。\"\n        okText=\"知道了\"\n        onOk={close}\n      />\n    </>\n  );\n}",
    "vue3": "<template>\n  <button v-for=\"c in CASES\" :key=\"c.type\" type=\"button\" @click=\"open(c.type)\">{{ c.label }}</button>\n  <KoleAlertModal\n    :visible=\"visible\"\n    :type=\"type\"\n    :title=\"title\"\n    :content=\"content\"\n    ok-text=\"知道了\"\n    @ok=\"close\"\n  />\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport { KoleAlertModal } from 'kole-ui/vue3';\n\nconst CASES = [\n  { type: 'info', label: '查看提示', title: '系统升级通知' },\n  { type: 'success', label: '成功提示', title: '操作成功' },\n  { type: 'error', label: '操作失败', title: '操作失败' },\n  { type: 'warning', label: '警告提示', title: '警告提示' }\n];\nconst content = '本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。';\nconst visible = ref(false);\nconst type = ref('info');\nconst title = computed(function () {\n  const hit = CASES.filter(function (c) { return c.type === type.value; })[0];\n  return hit ? hit.title : '提示';\n});\n\nfunction open(nextType) {\n  type.value = nextType;\n  visible.value = true;\n}\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2": "<template>\n  <div>\n    <button v-for=\"c in CASES\" :key=\"c.type\" type=\"button\" @click=\"open(c.type)\">{{ c.label }}</button>\n    <KoleAlertModal\n      :visible=\"visible\"\n      :type=\"type\"\n      :title=\"title\"\n      :content=\"content\"\n      ok-text=\"知道了\"\n      @ok=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { KoleAlertModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAlertModal },\n  data() {\n    return {\n      CASES: [\n        { type: 'info', label: '查看提示', title: '系统升级通知' },\n        { type: 'success', label: '成功提示', title: '操作成功' },\n        { type: 'error', label: '操作失败', title: '操作失败' },\n        { type: 'warning', label: '警告提示', title: '警告提示' }\n      ],\n      content: '本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。',\n      visible: false,\n      type: 'info'\n    };\n  },\n  computed: {\n    title() {\n      const hit = this.CASES.filter((c) => c.type === this.type)[0];\n      return hit ? hit.title : '提示';\n    }\n  },\n  methods: {\n    open(nextType) {\n      this.type = nextType;\n      this.visible = true;\n    },\n    close() {\n      this.visible = false;\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleAlertModal } from 'kole-ui/react';\n\nconst CASES = [\n  { type: 'info', label: '查看提示', title: '系统升级通知' },\n  { type: 'success', label: '成功提示', title: '操作成功' },\n  { type: 'error', label: '操作失败', title: '操作失败' },\n  { type: 'warning', label: '警告提示', title: '警告提示' },\n];\n\nexport default function AlertModalDemo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n  const [type, setType] = useState<string>('info');\n  const current = CASES.filter(function (c) { return c.type === type; })[0];\n\n  function open(nextType): JSX.Element {\n    setType(nextType);\n    setVisible(true);\n  }\n  function close(): JSX.Element {\n    setVisible(false);\n  }\n\n  return (\n    <>\n      {CASES.map(function (c) {\n        return (\n          <button key={c.type} type=\"button\" onClick={function () { open(c.type); }}>\n            {c.label}\n          </button>\n        );\n      })}\n      <KoleAlertModal\n        visible={visible}\n        type={type}\n        title={current ? current.title : '提示'}\n        content=\"本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。\"\n        okText=\"知道了\"\n        onOk={close}\n      />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <button v-for=\"c in CASES\" :key=\"c.type\" type=\"button\" @click=\"open(c.type)\">{{ c.label }}</button>\n  <KoleAlertModal\n    :visible=\"visible\"\n    :type=\"type\"\n    :title=\"title\"\n    :content=\"content\"\n    ok-text=\"知道了\"\n    @ok=\"close\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleAlertModal } from 'kole-ui/vue3';\n\nconst CASES = [\n  { type: 'info', label: '查看提示', title: '系统升级通知' },\n  { type: 'success', label: '成功提示', title: '操作成功' },\n  { type: 'error', label: '操作失败', title: '操作失败' },\n  { type: 'warning', label: '警告提示', title: '警告提示' }\n];\nconst content = '本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。';\nconst visible = ref<boolean>(false);\nconst type = ref<string>('info');\nconst title = computed(function () {\n  const hit = CASES.filter(function (c) { return c.type === type.value; })[0];\n  return hit ? hit.title : '提示';\n});\n\nfunction open(nextType) {\n  type.value = nextType;\n  visible.value = true;\n}\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button v-for=\"c in CASES\" :key=\"c.type\" type=\"button\" @click=\"open(c.type)\">{{ c.label }}</button>\n    <KoleAlertModal\n      :visible=\"visible\"\n      :type=\"type\"\n      :title=\"title\"\n      :content=\"content\"\n      ok-text=\"知道了\"\n      @ok=\"close\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleAlertModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAlertModal },\n  data(): Record<string, unknown> {\n    return {\n      CASES: [\n        { type: 'info', label: '查看提示', title: '系统升级通知' },\n        { type: 'success', label: '成功提示', title: '操作成功' },\n        { type: 'error', label: '操作失败', title: '操作失败' },\n        { type: 'warning', label: '警告提示', title: '警告提示' }\n      ],\n      content: '本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。',\n      visible: false,\n      type: 'info'\n    };\n  },\n  computed: {\n    title(): void {\n      const hit = this.CASES.filter((c) => c.type === this.type)[0];\n      return hit ? hit.title : '提示';\n    }\n  },\n  methods: {\n    open(nextType) {\n      this.type = nextType;\n      this.visible = true;\n    },\n    close(): void {\n      this.visible = false;\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/AlertModal.html 脚本 showAlert(type) 与 ICONS/TITLES 映射，以及四个触发按钮（查看提示/成功提示/操作失败/警告提示）各自的 data-type；prop visible/type/title/content/okText/onOk 见 AlertModal.jsx，正文文案取自演示页 .kole-alert-content。"
   ]
  }
 ],
 "curated": true
}