[Doc] SwipeCell: update demo (#3765)
This commit is contained in:
@@ -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` |
|
||||
|
||||
### 方法
|
||||
|
||||
Reference in New Issue
Block a user