## SwipeCell 滑动单元格 ### 使用指南 ``` javascript import { SwipeCell } from 'vant'; Vue.use(SwipeCell); ``` ### 代码演示 #### 基础用法 ```html 选择 删除 ``` #### 异步关闭 ```html 选择 删除 ``` ```js export default { methods: { onClose(clickPosition, instance) { switch (clickPosition) { case 'left': case 'cell': case 'outside': instance.close(); break; case 'right': Dialog.confirm({ message: '确定删除吗?' }).then(() => { instance.close(); }); break; } } } } ``` ### API | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| | left-width | 左侧滑动区域宽度 | `Number` | `0` | | right-width | 右侧滑动区域宽度 | `Number` | `0` | | on-close | 关闭时的回调函数 | `Function` | - | ### Slot | 名称 | 说明 | |-----------|-----------| | - | 自定义显示内容 | | left | 左侧滑动内容 | | right | 右侧滑动内容 | ### Event | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) | ### onClose 参数 | 参数 | 类型 | 说明 | |-----------|-----------|-----------| | clickPosition | `String` | 关闭时的点击位置 (`left` `right` `cell` `outside`) | | instance | `Object` | SwipeCell 实例 | ### 方法 通过 ref 可以获取到 SwipeCell 实例并调用实例方法 | 方法名 | 参数 | 返回值 | 介绍 | |-----------|-----------|-----------|-------------| | open | position: 'left' \| 'right' | - | 打开单元格侧边栏 | | close | - | - | 收起单元格侧边栏 | ### 更新日志 | 版本 | 类型 | 内容 | |-----------|-----------|-----------| | 1.2.0 | breaking change | 组件命名由 CellSwipe 修改为 SwipeCell | 1.1.15 | feature | 新增 open 方法 | | 1.0.5 | bugfix | 修复在垂直滑动时也会触发 Swipe 的问题 | | 1.0.0 | improvement | 优化动画流畅度 | | 0.11.3 | feature | 新增 onClose 属性,支持异步控制 | | 0.6.0 | feature | 新增组件 |