71 lines
3.0 KiB
JSON
71 lines
3.0 KiB
JSON
{
|
||
"slug": "alert",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 alert：type 只决定 is-* 配色类，四个 props 全在 props 块里声明，close 是唯一事件且不带参数。",
|
||
"usage": [
|
||
"`:type` 不产出任何类名前缀，实际拼的是 `:class=\"'is-' + type\"`，所以取值写 info / success 才对得上 CSS。",
|
||
"`:closable` 为假时不渲染那个带 aria-label=\"关闭\" 的 button，需要在界面上留痕迹就得自己加。",
|
||
"`@close` 收不到任何实参，组件不会自己消失，父组件必须在这个回调里把提示从列表里删掉。"
|
||
],
|
||
"bestPractices": [
|
||
"title 与 description 是两个独立 prop，模板里分别落在 <strong> 和 .kole-alert-desc 上，别再往 description 里塞换行拼标题。",
|
||
"整份实现只有一个根 div，多包一层会同时破坏 .kole-alert 与 .kole-alert-alert 两层类名的配合。"
|
||
],
|
||
"a11y": [
|
||
"根 div 自带 role=\"alert\"，插入 DOM 时屏幕阅读器会立刻播报，所以提示内容要一次给全，不要异步慢慢补字。",
|
||
"关闭按钮是原生 button 且带 aria-label=\"关闭\"，键盘可聚焦，回车即触发 close，无需额外补 tabindex。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块里的 4 个声明（type/title/description/closable，frameworks/Alert.vue2.vue:8-13）加一个 close 事件；没有 model 选项，因此不存在内置双向绑定。",
|
||
"table": [
|
||
{
|
||
"name": "closable",
|
||
"type": "属性",
|
||
"desc": "Boolean 开关，控制关闭按钮的 v-if（frameworks/Alert.vue2.vue:12,2）"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"type": "属性",
|
||
"desc": "副文本，渲染进 .kole-alert-desc 的 span（frameworks/Alert.vue2.vue:11,2）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "属性",
|
||
"desc": "主标题，渲染进根 div 内的 <strong>（frameworks/Alert.vue2.vue:10,2）"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "String",
|
||
"desc": "类型（契约：变体：default、primary、compact；具体组件按自身属性展示方向）（frameworks/Alert.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"type": "(val: any) => void",
|
||
"desc": "关闭时触发（frameworks/Alert.vue2.vue:2）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Alert.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Alert.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"alert-ex-1",
|
||
"alert-ex-2"
|
||
],
|
||
"notes": [
|
||
"四个 props 的声明行是 frameworks/Alert.vue2.vue:9-12，模板消费点在第 2 行，close 由第 2 行的 @click 直接 $emit。",
|
||
"契约 apiTable 把 type 的取值写成「变体：default、primary、compact」，但实现只把它拼进 is-* 类，取值以 CSS 里的 is-* 选择器为准。"
|
||
]
|
||
}
|