更新记录

0.1.14(2026-08-01) 下载此版本

  • 修复 Android 端(APP-ANDROID)判断多列数据时将 UTSJSONObject 强转为 UTSArray 引发的 ClassCastException;改用 Array.isArray() 做运行时类型判断,其它端保持原有逻辑。
  • 修复 Android 端(APP-ANDROID)暗黑模式下原生 picker-view 上下白色渐变遮罩覆盖选择器面板的问题;复用鸿蒙端的 mask-top-stylemask-bottom-style 透明渐变方案,iOS、Web 与小程序保持原有行为。
  • 修复 Android 端(APP-ANDROID)滚轮选中项上下边框不显示的问题;为原生 picker-view 指示器补全 solid 边框样式并继续使用主题分割线 token,其它端保持原有行为。

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序
-

其他

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

nax-select

uni-app x 列选择器(底部弹层 + picker-view),功能覆盖常用场景。

依赖

  • nax-icon(触发条箭头)
  • nax-transition(弹层进退场动画)
  • nax-ui-theme(CSS 变量 --nax-*,安装时依赖 / 运行时弱依赖)

组件特性

nax-select
弹层绑定 v-model:show(布尔),避免占用表单 v-model 语义
mode 拼写 推荐 multi-column / multi-column-auto,兼容历史 mutil-* 拼写
安全区 safe-area-inset-bottom 默认 true
触发条 可选 show-trigger,表单页可少写一层 Cell/Button
事件 额外 change / open / close
遮罩关闭 mask-closable(兼容 mask-close-able

基础用法

<nax-button label="打开选择" @click="visible = true"></nax-button>
<nax-select
  v-model:show="visible"
  :list="list"
  title="请选择"
  @confirm="onConfirm"
></nax-select>
const visible = ref(false)
const list = [
  { value: '1', label: '雪月夜' },
  { value: '2', label: '冷夜雨' }
]

function onConfirm(items: UTSJSONObject[]) {
  // items[i].value / .label / .index
}

内置触发条

<nax-select
  v-model:show="visible"
  show-trigger
  placeholder="请选择城市"
  :list="list"
  @confirm="onConfirm"
></nax-select>

模式 mode

说明 list 形态
single-column 单列(默认) [{ value, label }]
multi-column 多列独立 [[col1...], [col2...]]
multi-column-auto 多列联动 树形,子级字段默认 children

兼容:mutil-column / mutil-column-auto / cascade

常用 Props

属性 类型 默认 说明
show boolean false v-model:show 显隐
list array [] 列数据
mode string single-column 见上表
default-value number[] [] 默认选中下标
title string '' 标题
confirm-text / cancel-text string 确认 / 取消 按钮文案
value-name / label-name string value / label 字段名
child-name string children 联动子级字段
mask-closable boolean true 点遮罩关闭
safe-area-inset-bottom boolean true 底部安全区
preserve-selection boolean true 保留上次确认下标
show-trigger boolean false 内置触发条
placeholder string 请选择 触发条占位
disabled boolean false 触发条禁用
separator string / 多列展示分隔
z-index number 10075 层级
size string md 触发条 sm/md/lg
border boolean true 触发条描边
custom-class string '' 根扩展 class

事件

事件 说明
update:show 显隐
confirm 确认,回调选中项数组
cancel 取消或遮罩关闭
change 滚轮变化
open / close 打开 / 关闭

确认项字段:valuelabelindex,若源数据有 extra 则带回。

插槽

名称 说明
trigger 自定义触发区域(需 show-trigger

主题 Token

Token 用途
--nax-color-bg 面板 / 触发条背景
--nax-color-mask 遮罩
--nax-color-primary 确认色
--nax-color-text / secondary / placeholder 文案
--nax-color-divider 顶部分割线
--nax-radius-xl 面板顶圆角(建议业务覆盖为 12px+)

平台说明

  • 全端统一使用原生 picker-view 滚轮(含鸿蒙)。
  • 鸿蒙:原生滚轮;已禁用选项点选(点击被吞掉),请滑动选择后点「确认」。
  • 鸿蒙暗黑模式:通过 mask-top-style / mask-bottom-style 移除原生滚轮默认的白色渐变遮罩;该分端处理由 APP-HARMONY 条件编译。
  • 微信小程序滚动未结束时点确认会被忽略(滚动结束后方可确认)。
  • 弹层自包含,不依赖 nax-popup
  • 联动最多 4 列。

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。