99 lines
4.1 KiB
JSON
99 lines
4.1 KiB
JSON
{
|
||
"slug": "select",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 选择器，value 支持单值或数组以实现多选，选择结果通过 input 事件回传。",
|
||
"usage": [
|
||
"Vue 2 端单选传字符串、多选传数组，两者共用同一个 value prop，靠 multiple 切换行为。",
|
||
"v-model 仍然走 value 加 input 事件；同时组件还会派发一次 change，两者负载相同。",
|
||
"多选模式下已选项会渲染成带 ✕ 的 tag，点 ✕ 只删除该项并阻止冒泡，不会关掉面板。",
|
||
"分组选项走 groups（形如 [{ label, options: [...] }]），与 options 二选一使用。",
|
||
"下拉面板的关闭依赖 mounted 时注册在 document 上的点击监听，判定范围是组件根节点。"
|
||
],
|
||
"bestPractices": [
|
||
"options 与 groups 都为空时要靠面板里的 .kole-select-empty 表达无数据，业务侧不必再写空态。",
|
||
"searchable 打开后搜索词存在组件内部的 keyword，面板重新打开时会被清空，不要把搜索词当受控状态用。",
|
||
"触发器带 tabindex=\"0\" 但目前没有绑定键down处理，若产品要求键盘选择需在业务层补 @keydown。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端由 props 与 emit 承载：7 个 prop 加 input/change 两个事件，没有插槽。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String | Number | Array，默认 null",
|
||
"desc": "单选为标量，多选为数组；v-model 的接收端"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array，默认空数组",
|
||
"desc": "选项数组，元素形如 { value, label, disabled? }"
|
||
},
|
||
{
|
||
"name": "groups",
|
||
"type": "Array，默认 null",
|
||
"desc": "分组选项，元素形如 { label, options: [...] }"
|
||
},
|
||
{
|
||
"name": "multiple",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "多选模式，已选项渲染为可删除的 tag"
|
||
},
|
||
{
|
||
"name": "searchable",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "面板顶部出现搜索框，按 label 过滤"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "禁用态，给根节点加 is-disabled"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "String，默认 '请选择'",
|
||
"desc": "未选中时的占位文案"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，参数为最新值",
|
||
"desc": "选择或删除后触发，v-model 依赖它"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "事件，参数为最新值",
|
||
"desc": "与 input 同时派发，负载相同"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"触发器是 div 加 tabindex=\"0\"，可被 Tab 聚焦但不具备原生 combobox 语义，读屏器不会播报「组合框」。",
|
||
"选中项与禁用项用 is-selected / is-disabled 类表达，视觉之外无 aria-selected 标记。",
|
||
"禁用态时虽然样式置灰，元素仍是 div，键盘与读屏器都需要业务侧补限制。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Select.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Select.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Select.css",
|
||
"kind": "样式文件",
|
||
"desc": "Select.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"select-ex-1",
|
||
"select-ex-2",
|
||
"select-ex-3",
|
||
"select-ex-5"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Select.vue2.vue:53-61，value 的类型是三选一的联合数组 [String, Number, Array]。",
|
||
"input 与 change 在 frameworks/Select.vue2.vue:107-108 成对派发。",
|
||
"根节点上的 ref=\"root\" 与 document 点击监听见 frameworks/Select.vue2.vue:2、123-124。",
|
||
"事实包 consumedApi 里出现的 modelValue 在 frameworks/Select.vue2.vue 全文不存在（来自契约侧命名），本页按实现只写 value。"
|
||
]
|
||
}
|