[new feature] SwipeCell: add name prop (#3680)

src/swipe-cell/README.md

@@ -13,7 +13,7 @@ Vue.use(SwipeCell);
 ### Basic Usage
 
 ```html
-<van-swipe-cell :right-width="65" :left-width="65">
+<van-swipe-cell>
   <van-button
     square
     slot="left"
@@ -37,7 +37,7 @@ Vue.use(SwipeCell);
 ### Async close
 
 ```html
-<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
+<van-swipe-cell :on-close="onClose">
   <van-button
     square
     slot="left"
@@ -87,6 +87,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
+| name | Identifier of SwipeCell | `String | Number` | - |
 | on-close | Callback function before close | `Function` | - |
 | disabled | Whether to disabled swipe | `Boolean` | `false` |
 | left-width | Width of the left swipe area | `Number` | `auto` |
@@ -108,10 +109,11 @@ export default {
 
 ### onClose Params
 
-| Argument | Type | Description |
+| Attribute | Description | Type |
 |------|------|------|
-| clickPosition | `String` | Click positon (`left` `right` `cell` `outside`) |
-| instance | `Object` | SwipeCell instance |
+| clickPosition | Click positon (`left` `right` `cell` `outside`) | `String` |
+| instance | SwipeCell instance | `Object` |
+| detail | Detail info | `Object` |
 
 ### Methods
 
@@ -119,5 +121,5 @@ Use ref to get SwipeCell instance and call instance methods
 
 | Name | Attribute | Return value | Description |
 |------|------|------|------|
-| open | position: 'left' \| 'right' | - | open SwipeCell |
+| open | position: `left | right` | - | open SwipeCell |
 | close | - | - | close SwipeCell |

src/swipe-cell/README.zh-CN.md

@@ -12,8 +12,10 @@ Vue.use(SwipeCell);
 
 ### 基础用法
 
+`SwipeCell`组件提供了`left`和`right`两个插槽，用于定义两侧滑动区域的内容
+
 ```html
-<van-swipe-cell :right-width="60" :left-width="60">
+<van-swipe-cell>
   <van-button
     square
     slot="left"
@@ -37,7 +39,7 @@ Vue.use(SwipeCell);
 ### 异步关闭
 
 ```html
-<van-swipe-cell :right-width="60" :left-width="60" :on-close="onClose">
+<van-swipe-cell :on-close="onClose">
   <van-button
     square
     slot="left"
@@ -87,6 +89,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| name | 标识符，可以在 onClose 的参数中获取到 | `String | Number` | - | 2.0.4 |
 | on-close | 关闭时的回调函数 | `Function` | - | - |
 | disabled | 是否禁用滑动 | `Boolean` | `false` | 1.3.4 |
 | left-width | 指定左侧滑动区域宽度 | `Number` | `auto` | - |
@@ -108,10 +111,11 @@ export default {
 
 ### onClose 参数
 
-| 参数 | 类型 | 说明 |
+| 参数名 | 说明 | 类型 |
 |------|------|------|
-| clickPosition | `String` | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
-| instance | `Object` | SwipeCell 实例 |
+| clickPosition | 关闭时的点击位置 (`left` `right` `cell` `outside`) | `String` |
+| instance | SwipeCell 实例 | `Object` |
+| detail | 额外信息，包含 name 字段 | `Object` |
 
 ### 方法
 

src/swipe-cell/demo/index.vue

@@ -75,7 +75,7 @@ export default {
   },
 
   methods: {
-    onClose(clickPosition, instance) {
+    onClose(clickPosition, instance, detail) {
       switch (clickPosition) {
         case 'left':
         case 'cell':

src/swipe-cell/index.js

@@ -20,7 +20,11 @@ export default createComponent({
     onClose: Function,
     disabled: Boolean,
     leftWidth: Number,
-    rightWidth: Number
+    rightWidth: Number,
+    name: {
+      type: [String, Number],
+      default: ''
+    }
   },
 
   data() {
@@ -141,7 +145,7 @@ export default createComponent({
       }
 
       if (this.onClose) {
-        this.onClose(position, this);
+        this.onClose(position, this, { name: this.name });
       } else {
         this.swipeMove(0);
       }

src/swipe-cell/test/index.spec.js

@@ -36,7 +36,7 @@ it('drag and show right part', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-it('on close prop', () => {
+it('on-close prop', () => {
   let position;
   let instance;
 
@@ -72,6 +72,23 @@ it('on close prop', () => {
   expect(wrapper.vm.offset).toEqual(0);
 });
 
+it('name prop', done => {
+  const wrapper = mount(SwipeCell, {
+    ...defaultProps,
+    propsData: {
+      ...defaultProps.propsData,
+      name: 'test',
+      onClose(position, instance, detail) {
+        expect(detail.name).toEqual('test');
+        done();
+      }
+    }
+  });
+
+  wrapper.vm.open('left');
+  wrapper.trigger('click');
+});
+
 it('should reset after drag', () => {
   const wrapper = mount(SwipeCell, defaultProps);