blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(SwipeCell): add custom content demo

Browse Source
This commit is contained in:
陈嘉涵 2020-01-24 11:17:03 +08:00
parent e766d5d574
commit 2af7d1b209
8 changed files with 145 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/card/README.md
View File

@ -19,7 +19,7 @@ Vue.use(Card);
price="2.00"
title="Title"
desc="Description"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
```
@ -33,7 +33,7 @@ Vue.use(Card);
title="Title"
desc="Description"
origin-price="10.00"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
```
@ -47,7 +47,7 @@ Use slot to custom content.
title="Title"
desc="Description"
price="2.00"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
<div slot="tags">
<van-tag plain type="danger">Tag</van-tag>

6
src/card/README.zh-CN.md
View File

@ -19,7 +19,7 @@ Vue.use(Card);
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
```
@ -34,7 +34,7 @@ Vue.use(Card);
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
origin-price="10.00"
/>
```
@ -49,7 +49,7 @@ Vue.use(Card);
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
<div slot="tags">
<van-tag plain type="danger">标签</van-tag>

2
src/card/demo/index.vue
View File

@ -72,7 +72,7 @@ export default {
data() {
return {
imageURL: 'https://img.yzcdn.cn/vant/cat.jpeg',
imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
};
},
};

6
src/card/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>

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

@ -26,6 +26,39 @@ Vue.use(SwipeCell);
</van-swipe-cell>
```
### Custom Content
```html
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="Description"
title="Title"
class="goods-card"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<van-button
slot="right"
square
text="Delete"
type="danger"
class="delete-button"
/>
</van-swipe-cell>
<style>
.goods-card {
margin: 0;
background-color: @white;
}
.delete-button {
height: 100%;
}
</style>
```
### Before Close
```html

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

@ -28,6 +28,41 @@ Vue.use(SwipeCell);
</van-swipe-cell>
```
### 自定义内容
`SwipeCell`内容可以嵌套任意内容，比如嵌套一个商品卡片
```html
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<van-button
slot="right"
square
text="删除"
type="danger"
class="delete-button"
/>
</van-swipe-cell>
<style>
.goods-card {
margin: 0;
background-color: @white;
}
.delete-button {
height: 100%;
}
</style>
```
### 异步关闭
通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为

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

@ -18,6 +18,26 @@
</van-swipe-cell>
</demo-block>
<demo-block :title="$t('customContent')">
<van-swipe-cell>
<van-card
num="2"
price="2.00"
:desc="$t('desc')"
:title="$t('cardTitle')"
:thumb="imageURL"
/>
<template #right>
<van-button
square
type="danger"
class="delete-button"
:text="$t('delete')"
/>
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="$t('beforeClose')">
<van-swipe-cell :before-close="beforeClose">
<template #left>
@ -46,7 +66,9 @@ export default {
collect: '收藏',
title: '单元格',
confirm: '确定删除吗？',
cardTitle: '商品标题',
beforeClose: '异步关闭',
customContent: '自定义内容',
},
'en-US': {
select: 'Select',
@ -54,10 +76,18 @@ export default {
collect: 'Collect',
title: 'Cell',
confirm: 'Are you sure to delete?',
cardTitle: 'Title',
beforeClose: 'Before Close',
customContent: 'Custom Content',
},
},
data() {
return {
imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
};
},
methods: {
beforeClose({ position, instance }) {
switch (position) {
@ -86,5 +116,14 @@ export default {
.demo-swipe-cell {
user-select: none;
.van-card {
margin: 0;
background-color: @white;
}
.delete-button {
height: 100%;
}
}
</style>

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

@ -15,6 +15,34 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
</a>
<div class="van-card__content">
<div>
<div class="van-card__title van-multi-ellipsis--l2">商品标题</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
</div>
<div class="van-card__bottom">
<div class="van-card__price">
<div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div>
<div class="van-card__num">x2</div>
</div>
</div>
</div>
</div>
<div class="van-swipe-cell__right"><button class="delete-button van-button van-button--danger 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-duration: .6s;">