n-dropdown 下拉菜单
筛选标题栏：多个标题列横排等分，点击标题在下方展开与组件等宽的面板，面板内容自然高度完整展示，组件内部按标题栏位置在页面层定位，标题栏移动时自动收起，组内互斥（同时只开一列）、深色遮罩点击即关（淡入淡出随 duration）。成员 n-dropdown-item 必须放在 n-dropdown 内：标题与面板都由成员渲染，组统一管理成员、开合、样式与浮层锚点。典型场景是列表页顶部的「综合 / 销量 / 价格」筛选栏。
除面板选择列（menu）外，成员还提供四种条上直接交互的列型：sort 三态排序（未排序 → 升序 → 降序 → 未排序）、toggle 文字开关（布尔多选高亮）、switch 图标二态（如列表 / 宫格视图切换）、filter 筛选入口（配合抽屉做复杂筛选）。默认组内选中值互斥：点「销量」排序自动取消「价格」排序，开启 coexist 可共存；清值只回写 model-value，不触发 change。
- 值绑定在列上：每列
n-dropdown-item各自:model-value+@change回写（也可使用v-model简化绑定）；点击选项后面板自动收起；载荷随列型（选项值 / 排序方向 / 布尔）- 编程控制：组 ref 调
open(index)/close()（index 为当前标题栏从左到右的下标；指向非菜单列时静默拒绝）- 面板要放自定义内容（表单、多条件组合）时，给
n-dropdown-item传 default 插槽整体接管，通过插槽参数close()收起- 组上开启
show-selected-label即自动回显“去冰”“价格升序”等选中项 label；未匹配选项时回落到成员title。默认关闭，保留分类标题。排序值通过 change 返回，实际列表排序由业务处理。
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
Dropdown 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| active-color | 标题激活态与面板选中项颜色，留空取主题令牌 | String | "" | 与 css 相同 |
| inactive-color | 标题常态颜色，留空取主题令牌 | String | "" | 与 css 相同 |
| bg-color | 标题栏与面板背景色，留空取主题令牌 | String | "" | 与 css 相同 |
| height | 标题行高度 px，低于 44 按 44 处理（触控目标下限） | Number | 44 | - |
| title-size | 标题文字字号 px | Number | 14 | - |
| round | 标题栏圆角 px | Number | 0 | - |
| border-radius | 面板底部两角圆角 px | Number | 10 | - |
| menu-icon | 标题右侧箭头图标名（n-icon 名称表），空串不画 | String | down | 图标名 |
| menu-icon-size | 箭头尺寸 px | Number | 12 | - |
| show-selected-label | 是否自动用选中项 label 替换菜单标题；未匹配时显示成员 title | Boolean | false | - |
| duration | 面板展开与收起过渡时长 ms，0 为无动画 | Number | 220 | - |
| overlay | 是否渲染深色遮罩（压暗页面）；关闭后面板展开时页面仍可滚动点击 | Boolean | true | - |
| close-on-click-mask | 点击遮罩是否收起面板 | Boolean | true | - |
| close-on-click-self | 再点已展开列的标题是否收起 | Boolean | true | - |
| coexist | 选中值共存：开启后菜单/排序/开关列的选中互不相清；默认互斥，新选中清其他参与列的值（只回写 model-value，不触发 change） | Boolean | false | - |
| border-bottom | 是否显示标题栏底部分隔线 | Boolean | true | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "margin-right:12px" | String | "" | 与 css 相同 |
Dropdown 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| open | 面板展开后触发 | index：展开列的当前下标 |
| close | 面板收起后触发 | index：被收起列的当前下标 |
| error | 无法测量标题栏时触发，本次不展开 | {index, message} |
DropdownItem 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| type | 列型；列型在列的生命周期内保持不变，切换需整列重建 | String | menu | menu / sort / toggle / switch / filter |
| model-value | 选中值：menu 列为选项 value，sort 列为空串 / asc / desc，其余列为布尔 | String / Number / Boolean | "" | - |
| title | 分类标题；sort/toggle 列必填（或用 label 插槽），缺失时列停用并派发 error | String | "" | - |
| options | 选项列表（仅 menu 列）；坏项整体判错并派发 error | Array | [] | - |
| 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 | 仅禁默认标题点击展开/收起，配合 label 插槽自控交互 | Boolean | false | - |
| height | 面板限高 px，超出内部滚动（仅 menu 列） | Number | 0 | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
DropdownItem 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 值变更后触发（互斥清值也走此事件） | 新值：选项值 / 排序方向 / 布尔 |
| change | 点击选项或切换列状态后触发；互斥清值不触发 | 载荷与 update:modelValue 相同 |
| open / opened / close / closed | 面板开合与动画结束（仅 menu 列） | - |
| error | 选项数据非法、列配置缺失或独立使用时无法测量标题 | {index, message} |
Dropdown 方法（ref 调用）
| 方法名 | 说明 |
|---|---|
| open(index) | 展开指定列（已开保持） |
| close() | 收起当前展开列 |
实现说明
| 机制 | 使用方式 | 组件职责 |
|---|---|---|
| 标准选项 | 传 options、model-value 并回写值 | 渲染选项、对勾、标题、箭头、禁用态，选中后自动收起 |
| 标题回显 | 组上配置 showSelectedLabel | 内部匹配已校验选项，未匹配时回落 title；label 插槽也接收计算结果 |
| 动态成员 | 正常增删、替换、重排 n-dropdown-item | 注册与注销成员，按标题实际位置确定 open(index) 和事件下标，无需调用者改 key 重建整组 |
| 面板定位 | 正常放入页面布局 | 遮罩和面板使用页面层 fixed 定位，测量标题栏位置、宽度，无需调用者设置 overflow 或 z-index |
| 滚动与布局 | 无需转发页面或外层滚动事件 | 展开期检测标题栏移动并自动收起，页面隐藏和窗口尺寸变化时收起；仅展开期间启用位置检测 |
| 标题栏样式 | 使用颜色、圆角等属性或主题令牌 | 实际标题栏节点承载背景与圆角，面板内部负责底色、圆角、阴影和裁切 |
| 自定义确认 | default 插槽接收 close，在业务确认后调用 close() | 复用内部关闭流程与事件，无需调用者获取组件实例 |
| 面板状态 | 默认选项或自定义插槽 | 面板常驻并随开合显隐，保留插槽状态；height 仅限制内置列表，超出内部滚动 |
| 编程控制 | 可选调用组 ref open(index) / close() | 自动校验成员是否存在、可展开；切换列先通知旧列关闭再通知新列打开；指向非菜单列静默拒绝 |
| 筛选条列型 | 成员配 type 为 sort / toggle / switch / filter | 条上直接交互不开面板；点排序列先收起已展开面板；值互斥由组统一收口，清值只回写 model-value 不发 change |
| 列型图标 | sort 列升降序固定 up / down（可用 label 插槽自绘）；switch/filter 列 icon / active-icon 可换图，默认 unorderedlist↔appstore、filter↔filter-fill | 图标随选中态切换颜色与图形；switch 列选中标色（对图标视图切换的激活感知改良） |
| 参考源融合 | 参考实现为“条上状态位 + 业务自配弹出物”与“内置底部弹层”两路线 | 面板选择复用条下方展开面板（非底部弹层）；三态排序、选中值互斥（coexist）、switch/filter 列型取两参考并集：三态循环可取消排序（列表页刚需）、互斥规则照搬参考实现、switch 列选中标色修正参考实现激活感知弱的缺陷 |
示例中的主题控制、属性编辑、事件计数和复制代码只用于试玩。普通调用保留选项数据、属性绑定和值回写；自定义 slot 的内容与业务交互由使用方编写。排序方向放在 options.value 中，菜单返回所选方向，数据查询或实际列表排序由业务处理。