[Doc] SwipeCell: update demo (#3765)

This commit is contained in:
neverland
2019-07-07 05:57:09 +08:00
committed by GitHub
parent 6d18d38e55
commit 8871dec4e7
4 changed files with 62 additions and 82 deletions
+23 -35
View File
@@ -16,53 +16,41 @@ Vue.use(SwipeCell);
```html
<van-swipe-cell>
<van-button
square
slot="left"
type="danger"
text="选择"
/>
<van-cell
:border="false"
title="单元格"
value="内容"
/>
<van-button
square
slot="right"
type="danger"
text="删除"
/>
<template slot="left">
<van-button square type="primary" text="选择" />
</template>
<van-cell :border="false" title="单元格" value="内容" />
<template slot="right">
<van-button square type="danger" text="删除" />
<van-button square type="primary" text="收藏"/>
</template>
</van-swipe-cell>
```
### 异步关闭
通过传入`on-close`回调函数,可以自定义两侧滑动内容关闭时的行为
```html
<van-swipe-cell :on-close="onClose">
<van-button
square
slot="left"
type="danger"
text="选择"
/>
<van-cell
:border="false"
title="单元格"
value="内容"
/>
<van-button
square
slot="right"
type="danger"
text="删除"
/>
<template slot="left">
<van-button square type="primary" text="选择" />
</template>
<van-cell :border="false" title="单元格" value="内容" />
<template slot="right">
<van-button square type="danger" text="删除" />
</template>
</van-swipe-cell>
```
```js
export default {
methods: {
// clickPosition 表示关闭时点击的位置
onClose(clickPosition, instance) {
switch (clickPosition) {
case 'left':
@@ -114,7 +102,7 @@ export default {
| 参数名 | 说明 | 类型 |
|------|------|------|
| clickPosition | 关闭时的点击位置 (`left` `right` `cell` `outside`) | `String` |
| instance | SwipeCell 实例 | `Object` |
| instance | SwipeCell 实例,用于调用实例方法 | `Object` |
| detail | 额外信息,包含 name 字段 | `Object` |
### 方法