Cascader 级联选择
多级联动选择：支持多选勾选、父子解绑、多选值策略、路径搜索、动态加载、受控开合与标签折叠，键盘可操作。
基础用法
基础用法
点击展开多级面板，逐级下钻直到叶子节点提交。
选择即提交
选择即提交（change-on-select）
开启 change-on-select 后，点击任意层级的选项（含含子级的节点）即提交当前路径。
预设路径
预设值（value 路径数组）
value 为 JSON 数组，存放各级选中值；展示时拼接为「浙江 / 杭州」。
多选
多选（multiple）
多选时 value 为路径数组的数组（JSON），面板行前置复选框：勾选父级会级联勾选全部子级，部分勾选时父级呈半选态；触发器以标签回显，可单独移除。勾选后面板保持展开，便于连续选择。
父子解绑
父子解绑（check-strictly）
check-strictly 下父子勾选互不联动：勾选父级只提交父级路径，值即勾选集合（此时 value-mode 不生效）。
多选值策略
值策略（value-mode）
value-mode 决定多选时提交哪些路径：all（默认）= 全部勾选节点（子级全选时父级自动进值，与单选全路径心智一致）；parentFirst = 子级全选时收敛为父级代表；onlyLeaf = 只保留叶子路径。回显标签与 value 字面一致（宿主预设不被动改写），交互提交时按各自策略收敛。
可搜索
可搜索（filterable）
filterable 打开面板后出现搜索框，输入按「路径各级名称拼接」匹配，结果为扁平路径列表，点击直接选中该完整路径（多选则勾选）；输入时派发 oas-search。可通过 el.filter = (query, path) => boolean 自定义匹配（path 为各级选项数组）。
动态加载
动态加载（lazy + el.load）
设置 el.load = ({ option, path, depth }) => Promise<选项数组> 后，展开未加载的节点会显示「加载中」并请求子级（path 为根时 option 为 null，即第一级也可懒加载）；选项可标 isLeaf: true 声明叶子。本例模拟 500ms 网络延迟。
悬停展开
悬停展开（expand-trigger=hover）
expand-trigger="hover" 时悬停父级选项（约 120ms 防误触延时）即展开子级列，点击叶子提交；默认为 click。
大数据量（虚拟滚动）
虚拟滚动（1000 项长列）
设置 virtual 后超过阈值（50 项）的长列只渲染可视窗口（复用 oas-virtual-list 的窗口计算，首尾 padding 撑起滚动高度），千级选项滚动流畅、面板高度恒定；item-height 可调定高（默认 36）。键盘 ↑/↓ 导航时窗口自动跟随高亮行；低于阈值的短列与搜索结果、加载占位保持普通渲染。
仅末级与自定义分隔符
仅末级（show-all-levels）与分隔符（separator）
show-all-levels 默认 true（显示完整路径），设为 false 后触发器只显示末级名称；separator 自定义路径分隔符（默认 /），同时作用于搜索结果行。
可清空
可清空（clearable）
有选中值时显示清空按钮，点击清空并派发 oas-clear（detail 为清空前的值）与 oas-change（空值）。
标签折叠
标签折叠（max-tag-count）
多选标签默认换行展示；显式设置 max-tag-count 后按数量折叠为 +N（悬浮列出被折叠项），与 oas-select 约定一致。
尺寸与校验态
尺寸（size）
校验态（status）
size 支持 small / medium / large（就近继承 oas-config-provider 的全局尺寸）；status 支持 error / warning / success（error 同步 trigger 的 aria-invalid，表单校验亦可直接在宿主标 aria-invalid）。
受控开合
受控开合（open + oas-open-change）
open 属性为展开状态的唯一数据源（受控）：组件内外的开合都写回该属性，并在任何状态翻转时派发 oas-open-change（detail.open）；宿主可拦截事件回写实现完全受控。Esc 关闭时焦点返回触发器。
空态
空态（empty）
选项为空（且未设置 el.load）时面板显示「暂无数据」；搜索无匹配时显示「无匹配选项」。
加载态（loading）
加载态（loading）
loading 期间触发器显示 spinner 并标 aria-busy（替代展开箭头）；面板展开时只显示「加载中…」占位，不渲染选项——适合宿主拉取远程级联数据的请求窗口期。
字段映射（field-names）
字段映射（field-names）
field-names 为 JSON 字段别名（{ label, value, children, disabled }，对齐 oas-tree-select 契约），组件按别名读取原始数据（isLeaf 恒读原始键名）；懒加载 el.load 返回的数据同样按映射归一。上例中「设计 / UI」经 off 字段禁用。
禁用
禁用
无障碍名称（label）
label（可访问名称）
label 作为触发器的可访问名称（aria-label）来源：设置后读屏朗读该名称，优先于选中值文本与占位文本回退；未设置时按值文本 / 占位文本回退（对齐 oas-select 契约）。
弹出方向（placement）
placement（面板 12 向）
placement 支持 12 向：top / bottom / left / right × start / end / 居中（如 top-start、right-end），缺省 bottom（下方弹出，空间不足自动翻转避让）；非法值静默回落。侧边栏、表格内等贴边场景可直接声明方向。
自定义后缀图标（suffix-icon 插槽）
suffix-icon（替换默认箭头）
template[slot="suffix-icon"] 替换触发器默认下拉箭头（展开时随容器旋转；loading 时仍由 spinner 接管）。
自定义选项渲染（option 插槽）
option（选项行自定义渲染）
template[slot="option"] 克隆到每个选项行（面板行与搜索结果行两路生效），[data-option-label] 节点自动绑定展示文本（面板行为选项 label、搜索行为完整路径文本）；也可监听宿主事件改写行内容。
事件
选中事件
监听 oas-change，detail.value 单选为路径数组、多选为路径数组的数组：
焦点事件（oas-focus / oas-blur）
focus / blur 事件
触发器获得/失去焦点派发 oas-focus / oas-blur（detail.value 与 oas-change 同形状：单选路径数组、多选路径二维数组）；触发器 ↔ 搜索框 ↔ 标签按钮之间的组件内焦点转移不会误报。
移动形态（底部抽屉）
触屏（coarse pointer）或窄视口（<768px）下，多级面板自动改由 oas-bottom-sheet 底部抽屉承载：贴视口底升起 + 遮罩 + 拖拽把手下滑关闭（点遮罩 / Esc 同样收起），底部避让安全区；多级列在抽屉内容区内横向滑动；PC 形态保持原有浮层下拉不变。
API
oas-cascader
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
change-on-select | 选中任意层级即提交 | boolean | — |
check-strictly | 多选父子勾选解绑（勾选父级不联动子级） | boolean | — |
clearable | 可清空（派发 oas-clear） | boolean | — |
disabled | 禁用 | boolean | — |
expand-trigger | 子级展开触发方式：click（默认）/ hover（120ms 延时防误触） | string | click |
field-names | 字段别名 JSON（{ label, value, children, disabled }），对齐 tree-select 契约；懒加载结果同样映射 | string | — |
filterable | 可搜索（扁平路径结果） | boolean | — |
item-height | 虚拟列定高（px，配合 virtual，默认 36） | string | 36 |
label | 触发器可访问名称（aria-label），优先于值/占位回退 | string | — |
loading | 加载态：触发器 spinner + aria-busy，面板显示加载占位 | boolean | — |
max-tag-count | 多选标签按数量折叠 +N（带 title 列隐藏项） | number | — |
multiple | 多选（复选框级联勾选；子级全选父级自动进值） | boolean | — |
open | 受控展开状态（唯一状态源）；移动形态（触屏/窄视口 <768px）下展开态由 oas-bottom-sheet 底部抽屉承载（下滑/遮罩/Esc 收起），PC 为浮层下拉 | boolean | — |
options | 级联选项，JSON 数组，支持 children / disabled | CascaderOption[] | string | [] |
placeholder | 占位提示 | — | — |
placement | 面板 12 向弹出方向（非法回落 bottom，保留自动翻转避让） | string | bottom |
separator | 路径分隔符（默认 /） | string | / |
show-all-levels | 回显完整路径（默认 true）；false 仅末级 | string | true |
size | 尺寸档位 small / medium（默认）/ large | string | medium |
status | 校验态：error / warning / success；error 联动 aria-invalid | string | — |
value | 路径数组（JSON），如 ["zj","hz"] | string[] | string[][] | null | [] |
value-mode | 多选值策略：all（默认，全路径）/ parentFirst / onlyLeaf | string | all |
virtual | 面板列虚拟滚动（超过 50 项的长列复用 oas-virtual-list 窗口渲染；短列/搜索/加载占位保持普通渲染） | boolean | — |
Property（JS property；是否写回 attribute 见各行说明）
| Property | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 当前值：单选取选中路径数组，multiple 时取选中路径集合数组 | string[] | string[][] | null | — |
事件
| 事件 | 说明 |
|---|---|
oas-blur | 触发器失焦时派发，detail.value 与 oas-change 同形状（组件内焦点转移不误报） |
oas-change | 选择变化，detail: { value }（路径数组） |
oas-clear | 点击清空按钮，detail 为清空前的值 |
oas-focus | 触发器聚焦时派发，detail.value 与 oas-change 同形状（组件内焦点转移不误报） |
oas-open-change | 展开状态翻转，detail: { open } |
oas-search | filterable 输入，detail: { value } |
插槽
| 名称 | 说明 |
|---|---|
template[slot="option"] | 选项行自定义渲染模板，[data-option-label] 节点绑定选项文本 |
template[slot="suffix-icon"] | 自定义触发器后缀图标（替换默认箭头；loading 时让位 spinner） |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-cascader-dropdown-height | 240px |
--oas-glass-blur | none |
--oas-glass-ring | transparent |