[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
This commit is contained in:
neverland
2017-11-28 10:14:05 +08:00
committed by GitHub
parent a0acfd9f7f
commit f3e75ccba6
5 changed files with 198 additions and 20 deletions
+43 -1
View File
@@ -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 |
+42
View File
@@ -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 方法 |