93 lines
4.0 KiB
JSON
93 lines
4.0 KiB
JSON
{
|
||
"slug": "messagepro",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 全局轻提示：通过模板 ref 调用命令式方法弹出 success/error 等消息，可自动关闭。",
|
||
"usage": [
|
||
"本端用 defineExpose 暴露 open/close/success/error/warning/info/loading，父组件必须 const host = ref(null) 后在 <KoleMessagePro ref=\"host\" /> 上调用 host.value.success(\"保存成功\")（MessagePro.vue3.vue:32）。",
|
||
"唯一的 prop 是 duration，默认 3000 毫秒；它是全局兜底值，单条消息可在方法第二个参数里覆盖（MessagePro.vue3.vue:22）。",
|
||
"消息列表渲染在组件自身的 kole-message-wrap 容器里，所以命令式调用要先在页面挂一个宿主实例（MessagePro.vue3.vue:2）。",
|
||
"success/error/warning/info/loading 五个方法都只是 open({type, content}) 的语法糖，type 决定图标与 is-* 类（MessagePro.vue3.vue:26）。",
|
||
"传 duration 为 0 或负数即不自动关闭，需要用户点右侧 × 或调用 close(id)（MessagePro.vue3.vue:23）。"
|
||
],
|
||
"bestPractices": [
|
||
"方法返回自增 id，配合 close(id) 可以精确关闭某一条，适合「加载中」提示完成后替换成结果提示（MessagePro.vue3.vue:24）。",
|
||
"模板 ref 在挂载前为 null，务必在 onMounted 之后或事件回调里调用，直接写在 setup 顶层会报错（MessagePro.vue3.vue:32）。",
|
||
"每条消息的 closable 支持通过 open 的选项传入，显式传 closable:false 才会隐藏关闭按钮（MessagePro.vue3.vue:21）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端 API 不是 props 驱动而是命令式：defineExpose 把方法暴露给模板 ref，v-model 在这类全局反馈组件上无意义。",
|
||
"table": [
|
||
{
|
||
"name": "duration",
|
||
"type": "Number",
|
||
"desc": "自动关闭毫秒数兜底值，默认 3000；≤0 表示不自动关闭"
|
||
},
|
||
{
|
||
"name": "success",
|
||
"type": "exposed Method(content, duration?)",
|
||
"desc": "弹出成功提示，返回消息 id"
|
||
},
|
||
{
|
||
"name": "error",
|
||
"type": "exposed Method(content, duration?)",
|
||
"desc": "弹出错误提示，返回消息 id"
|
||
},
|
||
{
|
||
"name": "warning",
|
||
"type": "exposed Method(content, duration?)",
|
||
"desc": "弹出警告提示，返回消息 id"
|
||
},
|
||
{
|
||
"name": "info",
|
||
"type": "exposed Method(content, duration?)",
|
||
"desc": "弹出普通信息提示，返回消息 id"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"type": "exposed Method(content, duration?)",
|
||
"desc": "弹出加载中提示，图标为省略号"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"type": "exposed Method(id)",
|
||
"desc": "按 id 关闭指定消息"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"type": "exposed Method(opts)",
|
||
"desc": "底层方法，接收 { type, content, duration, closable }"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"消息容器没有 role=\"status\" 或 aria-live，弹出的提示对读屏是静默的，业务侧建议在宿主外层包 aria-live 区域（MessagePro.vue3.vue:2）。",
|
||
"关闭按钮是 span + @click，没有 button 语义与键盘可达性；纯键盘用户只能等自动关闭（MessagePro.vue3.vue:6）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MessagePro.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "messagepro 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/MessagePro.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"messagepro-ex-1",
|
||
"messagepro-ex-2",
|
||
"messagepro-ex-3",
|
||
"messagepro-ex-4",
|
||
"messagepro-ex-5"
|
||
],
|
||
"notes": [
|
||
"frameworks/MessagePro.vue3.vue:13 — 唯一 prop 是 duration",
|
||
"frameworks/MessagePro.vue3.vue:32 — 命令式 API 通过 defineExpose 暴露给模板 ref",
|
||
"frameworks/MessagePro.vue3.vue:19 — 统一入队，按 duration 决定是否 setTimeout 自动关闭"
|
||
]
|
||
}
|