vue2组件系列第三十七节:Collapse 折叠面板

Collapse折叠面板会经常用在一些问答页面，激活的问题会高亮显示出来，其它问题会折叠起来，这样会让我们的注意力集中。

准备工作：

1. 创建一个页面:Collapse.vue
2. 在router.js里配置Collapse页面的路由

{
 path: '/collapse',
 name: 'collapse',
 component: () => import('./views/Collapse.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/collapse')">
 <van-col span="6" class="marb20">
 <van-icon name="orders-o" />
 <div>collapse 轻提示</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了34个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Collapse 折叠面板：

基础用法：

<van-collapse v-model="activeNames">
 <van-collapse-item title="第一节" name="1">
 vue2组件第一节
 </van-collapse-item>
 <van-collapse-item title="第二节" name="2">
 vue2组件第二节
 </van-collapse-item>
 <van-collapse-item title="第三节" name="3">
 vue2组件第三节
 </van-collapse-item>
</van-collapse
data() {
 return {
 activeNames: ['1']
 }
},

name: 惟一标识，默认索引值

title：标题栏文字

基础用法的特点是可以打开多个折叠面板，从activeNames的数据是个数组就可以看出来。

手风琴效果

<van-collapse v-model="activeNames" accordion>
 <van-collapse-item title="第一节" name="1">
 vue2组件第一节
 </van-collapse-item>
 <van-collapse-item title="第二节" name="2">
 vue2组件第二节
 </van-collapse-item>
 <van-collapse-item title="第三节" name="3">
 vue2组件第三节
 </van-collapse-item>
 </van-collapse
data() {
 return {
 activeNames: 1
 }
},

accordion：是否开启手风琴模式

手风琴模式的特点是一次只能打一个面板，其activeNames是一个数字。

这个组件有一个change事件，change事件，有一个value参数。value值是激活面板的name值。当折叠面板变化时触发。

onChange(value) {
 console.log(value)
},

到目前为止呢，Collapse 折叠面板就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油