级联选择视图 CascaderView
CascaderView 是 Cascader 的内容区域。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
CascaderView 是 Cascader 的内容区域。
示例
CascaderView
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| activeIcon | 选中图标 | ReactNode | - |
| defaultValue | 默认选中项 | CascaderValue[] | [] |
| fieldNames | 自定义 options 中 label value disabled children 的字段 | { label: string, value: string, disabled: string, children: string } | { label: 'label', value: 'value',disabled:'disabled', children: 'children' } |
| onChange | 选项改变时触发 | (value: CascaderValue[], extend: CascaderValueExtend) => void | - |
| onTabsChange | 切换面板的回调 | (index: number) => void | - |
| options | 配置每一列的选项 | CascaderOption[] | - |
| placeholder | 未选中时的提示文案 | string | (index: number) => string | '请选择' |
| value | 选中项 | CascaderValue[] | - |
| loading | 开启骨架屏 | boolean | false |
| optionRender | 自定义选项的渲染函数 | (option: CascaderOption, info: { depth: number, active: boolean }) => ReactNode | - |
关于 CascaderValue CascaderOption[] CascaderValueExtend 的类型定义，请参考 Cascader 的文档。
加载中 <Experimental></Experimental>
你可以把 CascaderView.optionSkeleton 作为 CascaderOption[] 传入到 CascaderView 的 options 属性或者是 CascaderOption 的 children 中。CascaderView 会将其识别并显示出骨架屏效果。
CSS 变量
| 属性 | 说明 | 默认值 |
|---|---|---|
| --height | 高度 | 240px |