mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] SwipeCell: update demo (#3765)
This commit is contained in:
neverland
GitHub
parent
6d18d38e55
commit
8871dec4e7
@ -14,23 +14,16 @@ Vue.use(SwipeCell);
|
||||
|
||||
```html
|
||||
<van-swipe-cell>
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
text="Select"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
title="Cell"
|
||||
value="Cell Content"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
text="Delete"
|
||||
/>
|
||||
<template slot="left">
|
||||
<van-button square type="primary" text="Select" />
|
||||
</template>
|
||||
|
||||
<van-cell :border="false" title="Cell" value="Cell Content" />
|
||||
|
||||
<template slot="right">
|
||||
<van-button square type="danger" text="Delete" />
|
||||
<van-button square type="primary" text="Collect"/>
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
```
|
||||
|
||||
@ -38,23 +31,15 @@ Vue.use(SwipeCell);
|
||||
|
||||
```html
|
||||
<van-swipe-cell :on-close="onClose">
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
text="Select"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
title="Cell"
|
||||
value="Cell Content"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
text="Delete"
|
||||
/>
|
||||
<template slot="left">
|
||||
<van-button square type="primary" text="Select" />
|
||||
</template>
|
||||
|
||||
<van-cell :border="false" title="Cell" value="Cell Content" />
|
||||
|
||||
<template slot="right">
|
||||
<van-button square type="danger" text="Delete" />
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
```
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
### 方法
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<template #left>
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
:text="$t('button1')"
|
||||
type="primary"
|
||||
:text="$t('select')"
|
||||
/>
|
||||
</template>
|
||||
<van-cell
|
||||
@ -20,7 +20,12 @@
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
:text="$t('delete')"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
type="primary"
|
||||
:text="$t('collect')"
|
||||
/>
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
@ -31,8 +36,8 @@
|
||||
<template #left>
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
:text="$t('button1')"
|
||||
type="primary"
|
||||
:text="$t('select')"
|
||||
/>
|
||||
</template>
|
||||
<van-cell
|
||||
@ -44,7 +49,7 @@
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
:text="$t('delete')"
|
||||
/>
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
@ -57,16 +62,18 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '选择',
|
||||
button2: '删除',
|
||||
select: '选择',
|
||||
delete: '删除',
|
||||
collect: '收藏',
|
||||
title: '单元格',
|
||||
title2: '异步关闭',
|
||||
confirm: '确定删除吗？',
|
||||
tips: '建议在手机模式下浏览本示例'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Select',
|
||||
button2: 'Delete',
|
||||
select: 'Select',
|
||||
delete: 'Delete',
|
||||
collect: 'Collect',
|
||||
title: 'Cell',
|
||||
title2: 'Async close',
|
||||
confirm: 'Are you sure to delete?',
|
||||
|
||||
@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
|
||||
<div class="van-swipe-cell__left"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
|
||||
<div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
<div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button></div>
|
||||
<div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button> <button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">收藏</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
|
||||
<div class="van-swipe-cell__left"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
|
||||
<div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user