55 lines
2.7 KiB
JSON
55 lines
2.7 KiB
JSON
{
|
||
"slug": "messagepro",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 messagepro：命令式用法，拿 ref 调 success/error 等方法，duration 控制自动关闭毫秒数。",
|
||
"usage": [
|
||
"用法是 `$refs.host.success('保存成功')` 这类命令式调用：`:duration` 是构造时唯一可传的 prop，其余能力全在实例方法 open/close 与 success/error/warning/info/loading 上（第 18-31 行），没有对应事件。",
|
||
"`:duration` 是兜底自动关闭时长（默认 3000 毫秒，第 14 行）；方法第二参传入的 duration 优先，传 0 表示不自动关闭（第 22-23 行）。",
|
||
"每条消息存在 data.list 里，靠 `v-for=\"m in list\"` 渲染（第 3 行），success/error/warning/info/loading 的返回值是数字 id，可拿去主动 close(id) 收掉。"
|
||
],
|
||
"bestPractices": [
|
||
"必须在模板里挂 ref 才能调这些方法，忘记写 ref 时调用会直接报 undefined，不是静默失效。",
|
||
"closable 只在调用参数里传（item.closable，第 20 行），判断写成 `m.closable !== false`（第 3 行），因此默认是显示关闭叉的。",
|
||
"loading 类型不会自动消失：它同样走 duration 逻辑，需要传 0 再自行 close，否则会被定时器收掉。"
|
||
],
|
||
"a11y": [
|
||
"消息容器没有 role=\"status\" 或 aria-live，命令式弹出的内容不会被屏幕阅读器播报。",
|
||
"关闭叉是 span 加 @click（第 6 行），不是原生按钮，键盘不可达；需要无障碍时建议在外部另行提示。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 1 项（duration，frameworks/MessagePro.vue2.vue:14）加实例上的命令式方法（open/close/success/error/warning/info/loading，第 18-31 行）；没有事件与插槽。",
|
||
"table": [
|
||
{
|
||
"name": "duration",
|
||
"type": "Number",
|
||
"desc": "持续时间（frameworks/MessagePro.vue2.vue:14）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MessagePro.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/MessagePro.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"messagepro-ex-1",
|
||
"messagepro-ex-2",
|
||
"messagepro-ex-3",
|
||
"messagepro-ex-4",
|
||
"messagepro-ex-5"
|
||
],
|
||
"notes": [
|
||
"props 声明在 frameworks/MessagePro.vue2.vue:14（只有 duration）；命令式方法在第 17-31 行，模板第 3-6 行消费 list 与 icon()/close()。",
|
||
"接入点是 $refs（frameworks/MessagePro.vue2.vue:2-8 的模板需要挂 ref），ref 名与模板绑定是使用前提，这一点无法通过 props 表达。"
|
||
]
|
||
}
|