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

独绽2018 05-29 464

前言：

目前姐妹们对“js展开折叠”大约比较关切，咱们都想要了解一些“js展开折叠”的相关文章。那么小编也在网络上收集了一些对于“js展开折叠””的相关文章，希望小伙伴们能喜欢，你们一起来了解一下吧！

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

准备工作：

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

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

在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-collapsedata() { 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-collapsedata() { return { activeNames: 1 }},

accordion：是否开启手风琴模式

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

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