更新记录

0.1.9(2026-08-18) 下载此版本

  • 蒸汽模式兼容:lines CSS 声明迁移为 <text>:max-lines 属性(官方蒸汽模式方案),消除 Vapor 运行时与 CSS 编译器警告
  • 蒸汽模式(VUE3-VAPOR)兼容修复:标题文字 sm/lg 尺寸的 2 条下级选择器规则用 #ifndef VUE3-VAPOR 条件编译隔离,消除 "Invalid selector" 警告;VDOM/Web/小程序行为不变

0.1.7(2026-08-14) 下载此版本

  • readme 补齐 nax-dropdown / nax-dropdown-item 的 Props 与事件表格(此前仅源码 JSDoc 有 API 说明)

0.1.6(2026-08-14) 下载此版本

  • 精简 readme:移除内部开发向内容(设计说明 / 实现细节 / 平台差异实现等),只保留安装、用法、API、主题等用户文档
查看更多

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序

其他

多语言 暗黑模式 宽屏模式
× ×

nax-dropdown

筛选栏式下拉菜单。

组件

标签 说明
nax-dropdown 菜单栏容器:遮罩、展开/收起、fixed 吸顶
nax-dropdown-item 菜单项:默认 options 单选,或插槽自定义面板

基础用法

<nax-dropdown border-bottom>
  <nax-dropdown-item v-model="near" title="附近" :options="nearOptions"></nax-dropdown-item>
  <nax-dropdown-item v-model="sort" title="排序" :options="sortOptions"></nax-dropdown-item>
  <nax-dropdown-item title="筛选" :highlighted="filtered">
    <!-- 自定义面板 -->
    <view>...</view>
  </nax-dropdown-item>
</nax-dropdown>

Props(nax-dropdown)

属性 类型 默认 说明
size string 'md' 菜单栏高度:sm / md / lg
menuIcon string 'chevron-down' 收起图标
menuIconOpen string 'chevron-up' 展开图标
menuIconSize string '14' 图标尺寸(纯数字按 px)
borderBottom boolean false 菜单底部分割线
closeOnClickMask boolean true 点遮罩关闭
closeOnClickSelf boolean true 点默认选项后关闭
duration number 280 遮罩动画 ms
borderRadius string '0' 内容区底部圆角(纯数字按 px)
zIndex number 1000 层级
fixed boolean false 菜单栏吸顶 fixed
offsetTop string '0' fixed 额外 top 偏移(纯数字按 px)
immersive boolean false 沉浸导航:fixed top 叠加状态栏+导航栏高度
navbarHeight string '44' 沉浸时导航栏高度(纯数字按 px)
placeholder boolean true fixed 时是否占位
customClass string '' 根扩展 class

Props(nax-dropdown-item)

属性 类型 默认 说明
modelValue string '' 当前选中值(v-model),与 options[].value 对应
title string '' 菜单标题
options array [] 选项 { label, value } 或字符串
disabled boolean false 禁用该菜单
show boolean true 是否展示该菜单标题
height string '' 默认列表高度(有值时 scroll-view,纯数字按 px)
highlighted boolean false 强制高亮标题;默认跟 modelValue 自动
displaySelected boolean false 标题展示已选 label
labelName string 'label' 选项文案字段
valueName string 'value' 选项值字段
customClass string '' 根扩展 class

事件

事件 参数 说明
update:modelValue string v-model(nax-dropdown-item)
change string / number 选中值变化(item 传 string);切换菜单项(dropdown 传 index)
open number 展开菜单项 index(nax-dropdown)
close number 关闭菜单项 index(nax-dropdown)

主题

通过 CSS 变量覆盖:

Token 用途
--nax-color-bg 背景色
--nax-color-border 边框色
--nax-color-mask 遮罩色
--nax-color-primary 主题主色
--nax-color-text 主文字色

依赖

  • nax-icon
  • nax-ui-theme(可选,有 fallback)

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议