n-dropdown-item 下拉菜单列
n-dropdown 的列成员:menu 型为标题列 + 在页面层定位的下拉面板;sort / toggle / switch / filter 为无面板列型,在条上直接交互(排序三态循环、文字开关多选、图标二态切换、筛选入口标记)。必须在 n-dropdown 内使用(inject 命中组上下文后,开合与互斥由组接管);每列独立 :model-value + @change 绑定选中值。
- 默认(menu 型)是选项列表模式:传
options({label, value}数组),选中项高亮并画对勾,点击后面板自动收起- 面板要放自定义内容时传 default 插槽整体接管(不再生成选项列表,
height失效,options仍用于标题回显),通过插槽参数close()收起- 标题区要自定义时传 label 插槽(参数
{ active, label },active 为激活态:menu 列看面板展开,其余列型看选中值),标题与箭头由插槽绘制;配合disabled-click由业务自控点击
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
Dropdown-item 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| type | 列型;列型在列的生命周期内保持不变,切换需整列重建(外部 :key) | String | menu | menu / sort / toggle / switch / filter |
| model-value | 选中值:menu 列为命中的选项 value,sort 列为空串 / asc / desc,toggle/switch/filter 列为布尔 | String / Number / Boolean | "" | - |
| title | 分类标题;关闭组 showSelectedLabel 或未匹配时显示;sort/toggle 列必填(或用 label 插槽),缺失时列停用并派发 error | String | "" | - |
| options | 选项列表(仅 menu 列),label 展示、value 提交;default 插槽接管内容后仍用于标题回显 | Array | [] | {label, value} |
| icon | switch/filter 列常态图标名;空串取内置默认(switch 为 unorderedlist、filter 为 filter) | String | "" | 图标名 |
| active-icon | switch/filter 列选中态图标名;空串取内置默认(switch 为 appstore、filter 为 filter-fill) | String | "" | 图标名 |
| icon-size | switch/filter 列图标尺寸 px;sort 列升降序图标随组 menu-icon-size | Number | 16 | - |
| disabled | 禁用整列:标题降透明并拦截展开 | Boolean | false | - |
| disabled-click | 仅禁用默认标题点击展开/收起;仍可通过组 open(index) 展开并选择选项 | Boolean | false | - |
| height | 面板限高 px,超出内部滚动;0 为内容自适应;插槽模式无效;仅 menu 列使用 | Number | 0 | - |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式,如 "margin-right:12px" | String | "" | 与 css 相同 |
Dropdown-item 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 值变更后触发;与 change 同参同发,手动双向绑定监听其一;互斥清值也走此事件(不触发 change) | 新值:选项值 / 排序方向 / 布尔 |
| change | 点击选项或切换列状态后触发;menu 列选中后面板自动收起;互斥清值不触发 | 载荷与 update:modelValue 相同 |
| open | 本列面板展开后触发(仅 menu 列) | - |
| opened | 本列面板入场动画结束后触发(仅 menu 列) | - |
| close | 本列面板收起后触发(仅 menu 列) | - |
| closed | 本列退场动画结束后触发,面板隐藏并保留插槽状态(仅 menu 列) | - |
| error | options 含坏项、列配置缺失或独立使用时无法测量标题时触发 | {index, message} |
Dropdown-item 插槽
| 名称 | 说明 |
|---|---|
| default | 面板内容整体接管(height 失效,options 仍用于标题回显);参数 { close: () => void },确认业务后调用 close() 收起 |
| label | 标题区整体接管;插槽参数 { active, label } 提供展开态和组件计算后的标题 |
实现说明
- 列型状态机:menu 列开合面板;sort/toggle/switch/filter 列点击直接翻转自身值并经组收起已展开面板,不渲染遮罩与面板节点。
- 值互斥由组收口:成员向组声明互斥参与面与清值动作(menu/sort/toggle 参与,switch/filter 豁免),清值只发 update:modelValue 走父级回写,不发 change。
- 标题与默认选项的字号、颜色、箭头、禁用透明度由组件负责,调用者通过组属性和主题令牌配置。
- 面板和遮罩使用 fixed 定位,组内等宽对齐标题栏;展开前测量当前标题位置,Web 端内部补齐导航栏坐标差。页面容器无需设置 overflow 或 z-index。
- 成员在创建时注册、卸载时注销;身份与显示下标分离,组按当前标题位置排序,动态替换 slot 变体无需整组重建。
- 标题回显由组 showSelectedLabel 控制,匹配选中项后显示 label,未匹配时显示 title;label 插槽直接接收结果。
- 选项值分型比较,数字 1 与字符串 "1" 不会同时选中;数据非法时整体停止渲染内置列表并报告 error,修正后恢复。
- 面板常驻并使用显隐控制,开合保留插槽内部状态;滚动模式切换时只重建内置列表装配位。
- disabledClick 只拦截标题默认点击;disabled 才拦截程序化展开和选项选择。
- duration 为 0 时即时切换面板显隐,不等待入场帧;快速切换会取消过期的完成事件。
- 选中、遮罩点击、再次点击标题等标准收起行为均在组件内执行。页面或外层滚动区移动标题栏时自动收起,调用者无需监听页面滚动。
- 自定义面板可放任意业务内容;需要确认按钮时直接调用 default 插槽参数 close(),无需声明组件 ref。自定义 slot 的业务操作由使用方决定。