[Doc] Collapse: update demo

This commit is contained in:
陈嘉涵
2019-05-11 17:15:21 +08:00
parent c660c71ee6
commit 8ee250f22a
4 changed files with 39 additions and 60 deletions
+13 -24
View File
@@ -10,19 +10,14 @@ Vue.use(Collapse).use(CollapseItem);
### 代码演示
#### 基础用法
通过`v-model`控制展开的面板列表,`activeNames`为数组格式
```html
<van-collapse v-model="activeNames">
<van-collapse-item title="有赞微商城" name="1">
提供多样店铺模板,快速搭建网上商城
</van-collapse-item>
<van-collapse-item title="有赞零售" name="2">
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
</van-collapse-item>
<van-collapse-item title="有赞美业" name="3" disabled>
线上拓客,随时预约,贴心顺手的开单收银
</van-collapse-item>
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
</van-collapse>
```
@@ -37,19 +32,14 @@ export default {
```
#### 手风琴
通过`accordion`可以设置为手风琴模式,最多展开一个面板,此时`activeName`为字符串格式
```html
<van-collapse v-model="activeName" accordion>
<van-collapse-item title="有赞微商城" name="1">
提供多样店铺模板,快速搭建网上商城
</van-collapse-item>
<van-collapse-item title="有赞零售" name="2">
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
</van-collapse-item>
<van-collapse-item title="有赞美业" name="3">
线上拓客,随时预约,贴心顺手的开单收银
</van-collapse-item>
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
```
@@ -68,21 +58,20 @@ export default {
```html
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<div slot="title">有赞微商城<van-icon name="question-o" /></div>
提供多样店铺模板,快速搭建网上商城
<div slot="title">标题1 <van-icon name="question-o" /></div>
内容
</van-collapse-item>
<van-collapse-item
title="有赞零售"
title="标题2"
name="2"
icon="shop-o"
>
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
内容
</van-collapse-item>
</van-collapse>
```
### Collapse Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |