blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-11-28 06:42:09 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] SwipeCell: update demo (#3765)

Browse Source
This commit is contained in:
neverland 2019-07-07 05:57:09 +08:00 committed by GitHub
parent 6d18d38e55
commit 8871dec4e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/swipe-cell/README.md
View File

@ -14,23 +14,16 @@ Vue.use(SwipeCell);
```html ```html
<van-swipe-cell> <van-swipe-cell>
<van-button <template slot="left">
square <van-button square type="primary" text="Select" />
slot="left" </template>
type="danger"
text="Select" <van-cell :border="false" title="Cell" value="Cell Content" />
/>
<van-cell <template slot="right">
:border="false" <van-button square type="danger" text="Delete" />
title="Cell" <van-button square type="primary" text="Collect"/>
value="Cell Content" </template>
/>
<van-button
square
slot="right"
type="danger"
text="Delete"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```
@ -38,23 +31,15 @@ Vue.use(SwipeCell);
```html ```html
<van-swipe-cell :on-close="onClose"> <van-swipe-cell :on-close="onClose">
<van-button <template slot="left">
square <van-button square type="primary" text="Select" />
slot="left" </template>
type="danger"
text="Select" <van-cell :border="false" title="Cell" value="Cell Content" />
/>
<van-cell <template slot="right">
:border="false" <van-button square type="danger" text="Delete" />
title="Cell" </template>
value="Cell Content"
/>
<van-button
square
slot="right"
type="danger"
text="Delete"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```

58
src/swipe-cell/README.zh-CN.md
View File

@ -16,53 +16,41 @@ Vue.use(SwipeCell);
```html ```html
<van-swipe-cell> <van-swipe-cell>
<van-button <template slot="left">
square <van-button square type="primary" text="选择" />
slot="left" </template>
type="danger"
text="选择" <van-cell :border="false" title="单元格" value="内容" />
/>
<van-cell <template slot="right">
:border="false" <van-button square type="danger" text="删除" />
title="单元格" <van-button square type="primary" text="收藏"/>
value="内容" </template>
/>
<van-button
square
slot="right"
type="danger"
text="删除"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```
### 异步关闭 ### 异步关闭
通过传入`on-close`回调函数，可以自定义两侧滑动内容关闭时的行为
```html ```html
<van-swipe-cell :on-close="onClose"> <van-swipe-cell :on-close="onClose">
<van-button <template slot="left">
square <van-button square type="primary" text="选择" />
slot="left" </template>
type="danger"
text="选择" <van-cell :border="false" title="单元格" value="内容" />
/>
<van-cell <template slot="right">
:border="false" <van-button square type="danger" text="删除" />
title="单元格" </template>
value="内容"
/>
<van-button
square
slot="right"
type="danger"
text="删除"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```
```js ```js
export default { export default {
methods: { methods: {
// clickPosition 表示关闭时点击的位置
onClose(clickPosition, instance) { onClose(clickPosition, instance) {
switch (clickPosition) { switch (clickPosition) {
case 'left': case 'left':
@ -114,7 +102,7 @@ export default {
| 参数名 | 说明 | 类型 | | 参数名 | 说明 | 类型 |
|------|------|------| |------|------|------|
| clickPosition | 关闭时的点击位置 (`left` `right` `cell` `outside`) | `String` | | clickPosition | 关闭时的点击位置 (`left` `right` `cell` `outside`) | `String` |
| instance | SwipeCell 实例 | `Object` | | instance | SwipeCell 实例，用于调用实例方法 | `Object` |
| detail | 额外信息，包含 name 字段 | `Object` | | detail | 额外信息，包含 name 字段 | `Object` |
### 方法 ### 方法

27
src/swipe-cell/demo/index.vue
View File

@ -7,8 +7,8 @@
<template #left> <template #left>
<van-button <van-button
square square
type="danger" type="primary"
:text="$t('button1')" :text="$t('select')"
/> />
</template> </template>
<van-cell <van-cell
@ -20,7 +20,12 @@
<van-button <van-button
square square
type="danger" type="danger"
:text="$t('button2')" :text="$t('delete')"
/>
<van-button
square
type="primary"
:text="$t('collect')"
/> />
</template> </template>
</van-swipe-cell> </van-swipe-cell>
@ -31,8 +36,8 @@
<template #left> <template #left>
<van-button <van-button
square square
type="danger" type="primary"
:text="$t('button1')" :text="$t('select')"
/> />
</template> </template>
<van-cell <van-cell
@ -44,7 +49,7 @@
<van-button <van-button
square square
type="danger" type="danger"
:text="$t('button2')" :text="$t('delete')"
/> />
</template> </template>
</van-swipe-cell> </van-swipe-cell>
@ -57,16 +62,18 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
button1: '选择', select: '选择',
button2: '删除', delete: '删除',
collect: '收藏',
title: '单元格', title: '单元格',
title2: '异步关闭', title2: '异步关闭',
confirm: '确定删除吗？', confirm: '确定删除吗？',
tips: '建议在手机模式下浏览本示例' tips: '建议在手机模式下浏览本示例'
}, },
'en-US': { 'en-US': {
button1: 'Select', select: 'Select',
button2: 'Delete', delete: 'Delete',
collect: 'Collect',
title: 'Cell', title: 'Cell',
title2: 'Async close', title2: 'Async close',
confirm: 'Are you sure to delete?', confirm: 'Are you sure to delete?',

6
src/swipe-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-swipe-cell"> <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__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 van-cell--borderless">
<div class="van-cell__title"><span>单元格</span></div> <div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__value"><span>内容</span></div> <div class="van-cell__value"><span>内容</span></div>
</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> </div>
<div> <div>
<div class="van-swipe-cell"> <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__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 van-cell--borderless">
<div class="van-cell__title"><span>单元格</span></div> <div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__value"><span>内容</span></div> <div class="van-cell__value"><span>内容</span></div>