[new feature] CellSwipe support async controll (#356)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot

* [new feature] ImagePreview support manually close

* fix: ImagePreview test case

* [Doc] add switch lang button in mobile

* [bugfix] Popup overlay style update

* [bugfix] NavBar click event

* [Improvement] optimize build speed

* [new feature] CellSwipe support async controll

docs/demos/views/cell-swipe.vue

@@ -1,15 +1,28 @@
 <template>
-  <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-cell-swipe :right-width="65" :left-width="65">
-        <span slot="left">{{ $t('button1') }}</span>
-        <van-cell-group>
-          <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
-        </van-cell-group>
-        <span slot="right">{{ $t('button2') }}</span>
-      </van-cell-swipe>
-    </demo-block>
-  </demo-section>
+  <div>
+    <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
+    <demo-section>
+      <demo-block :title="$t('basicUsage')">
+        <van-cell-swipe :right-width="65" :left-width="65">
+          <span slot="left">{{ $t('button1') }}</span>
+          <van-cell-group>
+            <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
+          </van-cell-group>
+          <span slot="right">{{ $t('button2') }}</span>
+        </van-cell-swipe>
+      </demo-block>
+
+      <demo-block :title="$t('title2')">
+        <van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
+          <span slot="left">{{ $t('button1') }}</span>
+          <van-cell-group>
+            <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
+          </van-cell-group>
+          <span slot="right">{{ $t('button2') }}</span>
+        </van-cell-swipe>
+      </demo-block>
+    </demo-section>
+  </div>
 </template>
 
 <script>
@@ -18,12 +31,37 @@ export default {
     'zh-CN': {
       button1: '选择',
       button2: '删除',
-      title: '单元格'
+      title: '单元格',
+      title2: '异步关闭',
+      confirm: '确定删除吗？',
+      tips: '建议在手机模式下浏览本示例'
     },
     'en-US': {
       button1: 'Select',
       button2: 'Delete',
-      title: 'Cell'
+      title: 'Cell',
+      title2: 'Async close',
+      confirm: 'Are you sure to delete?',
+      tips: 'Please try this demo in mobile mode'
+    }
+  },
+
+  methods: {
+    onClose(clickPosition, instance) {
+      switch (clickPosition) {
+        case 'left':
+        case 'cell':
+        case 'outside':
+          instance.close();
+          break;
+        case 'right':
+          Dialog.confirm({
+            message: this.$t('confirm')
+          }).then(() => {
+            instance.close();
+          });
+          break;
+      }
     }
   }
 };
@@ -31,6 +69,8 @@ export default {
 
 <style lang="postcss">
 .demo-cell-swipe {
+  user-select: none;
+
   .van-cell-swipe__left,
   .van-cell-swipe__right {
       color: #FFFFFF;

docs/markdown/en-US/cell-swipe.md

@@ -15,18 +15,54 @@ Vue.component(CellSwipe.name, CellSwipe);
 <van-cell-swipe :right-width="65" :left-width="65">
   <span slot="left">Select</span>
   <van-cell-group>
-    <van-cell title="Cell" value="Cell Content"></van-cell>
+    <van-cell title="Cell" value="Cell Content" />
   </van-cell-group>
   <span slot="right">Delete</span>
 </van-cell-swipe>
 ```
 
+#### Async close
+
+```html
+<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
+  <span slot="left">Select</span>
+  <van-cell-group>
+    <van-cell title="Cell" value="Cell Content" />
+  </van-cell-group>
+  <span slot="right">Delete</span>
+</van-cell-swipe>
+```
+
+```js
+export default {
+  methods: {
+    onClose(clickPosition, instance) {
+      switch (clickPosition) {
+        case 'left':
+        case 'cell':
+        case 'outside':
+          instance.close();
+          break;
+        case 'right':
+          Dialog.confirm({
+            message: 'Are you sure to delete?'
+          }).then(() => {
+            instance.close();
+          });
+          break;
+      }
+    }
+  }
+}
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | left-width | Width of the left scrollable area | `Number` | `0` | - |
 | right-width | Width of the right scrollable area | `Number` | `0` | - |
+| on-close | Callback function before close | `Function` | - | - |
 
 ### Slot
 
@@ -35,3 +71,9 @@ Vue.component(CellSwipe.name, CellSwipe);
 | - | custom content |
 | left | content of left scrollable area |
 | right | content of right scrollabe area |
+
+### onClose Params
+| Argument | Type | Description |
+|-----------|-----------|-----------|
+| clickPosition | `String` | Click positon (`left` `right` `cell` `outside`) |
+| instance | `Object` | CellSwipe instance with a close method |

docs/markdown/zh-CN/cell-swipe.md

@@ -21,12 +21,48 @@ Vue.component(CellSwipe.name, CellSwipe);
 </van-cell-swipe>
 ```
 
+#### 异步关闭
+
+```html
+<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
+  <span slot="left">选择</span>
+  <van-cell-group>
+    <van-cell title="单元格" value="内容" />
+  </van-cell-group>
+  <span slot="right">删除</span>
+</van-cell-swipe>
+```
+
+```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
 
@@ -35,3 +71,9 @@ Vue.component(CellSwipe.name, CellSwipe);
 | - | 自定义显示内容 |
 | left | 左侧滑动内容 |
 | right | 右侧滑动内容 |
+
+### onClose 参数
+| 参数 | 类型 | 说明 |
+|-----------|-----------|-----------|
+| clickPosition | `String` | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
+| instance | `Object` | CellSwipe 实例，挂载有 close 方法 |