n-swipe-action-item 滑动单元格
按 direction 配置左滑展开右侧主菜单或右滑展开左侧主菜单；补充 reverseOptions 或 reverseButton 插槽后同一行可双向滑动。手势、宽度变化、互斥、禁用和内容点击防误触均由组件处理，可单独使用。
平台兼容性
| App | Web | 微信小程序 |
|---|---|---|
| √ | √ | √ |
API
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 主菜单展开方向：left 左滑展开右侧菜单，right 右滑展开左侧菜单 | NSwipeActionDirection | left |
| modelValue | 可选的开合绑定；null 时组件自行管理，绑定布尔值时使用 v-model，true 表示任一菜单展开 | boolean / null | null |
| name | click、change、error 回传的业务标识，动态列表建议使用稳定 id | string / number | |
| options | 主菜单按钮，从左到右排列；button 插槽存在时忽略 | NSwipeActionOption[] | [] |
| reverseOptions | 反方向菜单按钮，提供后该行可双向滑动；reverseButton 插槽存在时忽略 | NSwipeActionOption[] | [] |
| disabled | 禁用菜单滑动、展开和点击；内容插槽自身交互仍可用 | boolean | false |
| autoClose | 是否参与组内互斥；false 时该行独立开合 | boolean | true |
| threshold | 松手吸附距离 px；-1 使用组设置，独立使用时为 20 | number | -1 |
| duration | 松手吸附过渡时长 ms；拖动时无过渡，0 为即时落位 | number | 300 |
| closeOnClick | 点击数据菜单按钮后自动收起；自定义菜单通过插槽 close 收起 | boolean | true |
| fontSize | 数据菜单统一字号 px；0 跟随主题，单项 fontSize 可覆盖 | number | 0 |
| contentStyle | 内容容器行内样式 | string | |
| buttonStyle | 数据菜单按钮容器行内样式，两侧菜单共用 | string | |
| textStyle | 数据菜单文字行内样式，两侧菜单共用 | string | |
| customClass | 根节点额外类，须在组件样式表中定义 | string | |
| customStyle | 根节点行内样式 | string |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 请求开合，供可选 v-model 使用 | boolean |
| change | 实际开合变化 | NSwipeActionChange： |
| click | 数据菜单点击，禁用不触发 | NSwipeActionClick： |
| error | 配置或测量错误，index=-1 表示整行 | NSwipeActionError： |
插槽
| 名称 | 说明 |
|---|---|
| default | 业务内容；参数 {open: boolean, close}，展开后点击仅收起菜单，不触发内容点击 |
| button | 主菜单整组接管，忽略 options；参数 |
| reverseButton | 反向菜单整组接管，忽略 reverseOptions；参数 |
方法
| 名称 | 说明 |
|---|---|
| open | 展开菜单；参数 side 可选（"main" 主菜单 / "reverse" 反向菜单），缺省主菜单 |
| close | 收起并取消拖动 |
| toggle | 切换指定菜单开合；参数同 open，当前另一侧展开时切换到指定侧 |
菜单数据
NSwipeActionOption：text 为非空文字，bg、color 为可选颜色，fontSize 为可选正数，disabled 为可选布尔值。公开类型均可从库入口导入，不依赖加密实现目录。
样式
主题令牌依次支持运行时 CSS 变量、编译时 SCSS 覆盖和库默认值。font-size=0 时使用主题字号，不写行内默认颜色与字号。
| CSS 变量 | 默认值 |
|---|---|
| --n-swipe-btn-bg | #ef4444 |
| --n-swipe-btn-color | #ffffff |
| --n-swipe-btn-font-size | 14px |
| --n-swipe-btn-padding-x | 18px |
| --n-swipe-btn-pressed-opacity | 0.75 |
| --n-swipe-btn-disabled-opacity | 0.5 |
| --n-swipe-disabled-opacity | 0.5 |
内部节点可用 content-style、button-style、text-style。自定义 button / reverseButton 插槽的图标和外观由调用方提供，宽度测量、禁用和互斥由组件处理。
实现说明
| 参考做法 | 本组件做法 | 分歧理由 |
|---|---|---|
| 分组管理、自动关闭、禁用和吸附距离 | 容器统一提供 autoClose、disabled、threshold；成员可覆盖距离或退出互斥 | 普通列表只需配置一次，成员独立使用也完整 |
| show 属性控制及内部手势开合 | 可选 v-model，未绑定时自行管理，同时保留方法 | 遵循官方组件双向绑定，常见用法无需 ref |
| 组实例按索引 open/close 指定行 | 成员 v-model 与 open/close/toggle 方法承担，v-for 配 v-model 数组即可按行控制 | 动态列表维护索引与成员的对应关系易错，受控绑定由渲染层保证一致 |
| 组级 click 点击事件 | 内容点击由内容插槽自身事件承接，菜单点击走本组件 click | 点击语义属业务内容，容器转发无法携带内容上下文 |
| 菜单数据、单项颜色字号、整组插槽 | options / reverseOptions 与 button / reverseButton 插槽，主题令牌及内部样式属性 | 数据驱动常见用法零模板，插槽保留全定制 |
| 左右两侧独立插槽 | reverseOptions / reverseButton 表达反向菜单，direction 决定主菜单侧 | 数据与插槽两通道对称，主菜单行为与单侧用法完全一致 |
| 实测菜单宽度 | 复用内部尺寸监听，内容与主题变化自动跟随 | 不使用文字估宽；隐藏停止监听，异步旧结果失效 |
| 内容和菜单同行平移 | 根裁剪，轨道允许超界，菜单常驻 | 菜单可见且可点击，内容插槽状态保留 |
| 吸附距离按菜单宽度比例（默认 0.3） | threshold 为像素值，自动收敛到菜单半宽以内 | 像素值直观可预估；短菜单下比例阈值过小不易触发，半宽上限兜底 |
| 行组件自带上下间距属性 | 间距走 customStyle（margin 任意方向） | 布局间距由调用方统一管理，避免与列表节奏冲突 |
| 手势方向锁与吸附 | 单指跟踪、纵向放行、横向阻止默认行为、取消恢复原状态 | 避免多指锁死及取消手势误展开 |
- direction="left" 为左滑展开右侧主菜单，direction="right" 为右滑展开左侧主菜单；配置 reverseOptions 或 reverseButton 后同一行可双向滑动，松手按拖出侧分别吸附，一侧展开时另一侧菜单不参与。切换方向会取消进行中的拖动并按当前开合态重新定位。
- 动态列表使用稳定业务 id 作为 key。关闭组互斥后可多行展开，重新开启时保留最后操作的参与成员；成员 auto-close=false 时独立开合。
- 展开后透明内容覆盖层拦截收起点击，调用方无需维护防误触状态。收起时内容插槽交互不受影响。
- 配置非法时整体停止菜单交互并派发 error（side 定位出错菜单）；测量宽度不可用时不使用估算值。修正数据或重新显示内容后可继续操作。
- 切页、切后台和组级收起均取消拖动；独立成员也会自行处理隐藏生命周期。