65 lines
2.7 KiB
JSON
65 lines
2.7 KiB
JSON
{
|
||
"slug": "divider",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 分隔线：水平或垂直的分隔，可在线上带一段小标题。",
|
||
"usage": [
|
||
"defineProps 声明 orientation/title/variant，defineEmits 为空数组，组件无事件无插槽；variant 声明后未被模板消费（Divider.vue3.vue:12）。",
|
||
"title 渲染在分隔线之前作为说明文本，默认「更多信息」（Divider.vue3.vue:2）。",
|
||
"variant 声明默认 solid，模板未消费该值，虚实线只由样式文件决定（Divider.vue3.vue:10）。",
|
||
"本端 defineEmits 为空数组，没有事件与插槽，纯静态元素（Divider.vue3.vue:12）。",
|
||
"垂直模式仅改类名，仍会渲染标题文本，垂直分隔通常应传空 title（Divider.vue3.vue:9）。"
|
||
],
|
||
"bestPractices": [
|
||
"垂直分隔记得传 :title=\"''\"，否则标题文本会与竖线一起出现在行内（Divider.vue3.vue:2）。",
|
||
"variant 当前无效果，虚线样式需要外部覆盖 kole-divider-divider 类（Divider.vue3.vue:10）。",
|
||
"分隔元素是原生 hr，自带分隔语义；若用于纯装饰场景建议加 aria-hidden，避免读屏重复播报分隔符（Divider.vue3.vue:2）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端无事件无插槽，三个 props 中 orientation 影响类名、title 参与渲染，variant 声明未消费。",
|
||
"table": [
|
||
{
|
||
"name": "orientation",
|
||
"type": "String",
|
||
"desc": "方向，默认 horizontal；vertical 时给 hr 加 is-vertical 类"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "线上说明文本，默认「更多信息」"
|
||
},
|
||
{
|
||
"name": "variant",
|
||
"type": "String",
|
||
"desc": "变体，默认 solid；当前模板未消费该值"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"使用原生 hr 承载分隔语义，读屏可以正确识别为分隔（Divider.vue3.vue:2）。",
|
||
"标题文本是 span，位于 hr 之前而不在线的中间，读屏顺序是先读标题再读分隔，与视觉的「线上标题」不完全一致（Divider.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Divider.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "divider 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Divider.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"divider-ex-1",
|
||
"divider-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Divider.vue3.vue:2 — orientation 只映射到类名",
|
||
"frameworks/Divider.vue3.vue:12 — 空事件数组，无事件无插槽",
|
||
"frameworks/Divider.vue3.vue:10 — variant 声明但模板未消费"
|
||
]
|
||
}
|