Skip to content

n-dropdown-item 下拉菜单列 ​

n-dropdown 的列成员:menu 型为标题列 + 在页面层定位的下拉面板;sort / toggle / switch / filter 为无面板列型,在条上直接交互(排序三态循环、文字开关多选、图标二态切换、筛选入口标记)。必须在 n-dropdown 内使用(inject 命中组上下文后,开合与互斥由组接管);每列独立 :model-value + @change 绑定选中值。

  1. 默认(menu 型)是选项列表模式:传 options({label, value} 数组),选中项高亮并画对勾,点击后面板自动收起
  2. 面板要放自定义内容时传 default 插槽整体接管(不再生成选项列表,height 失效,options 仍用于标题回显),通过插槽参数 close() 收起
  3. 标题区要自定义时传 label 插槽(参数 { active, label },active 为激活态:menu 列看面板展开,其余列型看选中值),标题与箭头由插槽绘制;配合 disabled-click 由业务自控点击

平台兼容性 ​

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ × × × ×

API ​

参数 说明 类型 默认值 可选值
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 相同
事件名 说明 回调参数
update:modelValue 值变更后触发;与 change 同参同发,手动双向绑定监听其一;互斥清值也走此事件(不触发 change) 新值:选项值 / 排序方向 / 布尔
change 点击选项或切换列状态后触发;menu 列选中后面板自动收起;互斥清值不触发 载荷与 update:modelValue 相同
open 本列面板展开后触发(仅 menu 列) -
opened 本列面板入场动画结束后触发(仅 menu 列) -
close 本列面板收起后触发(仅 menu 列) -
closed 本列退场动画结束后触发,面板隐藏并保留插槽状态(仅 menu 列) -
error options 含坏项、列配置缺失或独立使用时无法测量标题时触发 {index, message}
名称 说明
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 的业务操作由使用方决定。

记录 · 思考 · 创作