通过折叠面板收纳内容区域
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
<template> <u-collapse @change="change" @close="close" @open="open" > <u-collapse-item title="文档指南" name="Docs guide" > <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> </u-collapse-item> <u-collapse-item title="组件全面" name="Variety components" > <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> </u-collapse-item> <u-collapse-item title="众多利器" name="Numerous tools" > <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> </u-collapse-item> </u-collapse> </template> <script> export default { methods: { open(e) { // console.log('open', e) }, close(e) { // console.log('close', e) }, change(e) { // console.log('change', e) } } } </script>
copy
#控制面板的初始状态，以及是否可以操作
- 设置
u-collapse-item的name参数，并在u-collapse中指定数组value可以让面板初始化时为打开状态 - 如果设置
u-collapse-item的disabled参数，那么面板会保持被禁用状态
<template> <u-collapse :value="['2']" > <u-collapse-item title="文档指南" > <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> </u-collapse-item> <u-collapse-item disabled title="组件全面" > <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> </u-collapse-item> <u-collapse-item name="2" title="众多利器" > <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> </u-collapse-item> </u-collapse> </template> <script> export default { methods: { open(e) { // console.log('open', e) }, close(e) { // console.log('close', e) }, change(e) { // console.log('change', e) } } } </script>
copy
#手风琴模式
- 将
u-collapse的accordion设置为true，这样可以开启手风琴模式
<template> <view class="u-page__item"> <text class="u-page__item__title">手风琴模式</text> <u-collapse accordion > <u-collapse-item title="文档指南" > <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> </u-collapse-item> <u-collapse-item title="组件全面" > <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> </u-collapse-item> <u-collapse-item title="众多利器" > <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> </u-collapse-item> </u-collapse> </view> </template> <style lang="scss"> .u-page { padding: 0; &__item { &__title { color: $u-tips-color; background-color: $u-bg-color; padding: 15px; font-size: 15px; &__slot-title { color: $u-primary; font-size: 14px; } } } } .u-collapse-content { color: $u-tips-color; font-size: 14px; } </style>
copy
#自定义标题和内容
- 通过设置
slot来自定义标题和内容
<template> <view class="u-page__item"> <text class="u-page__item__title">自定义标题和内容</text> <u-collapse accordion > <u-collapse-item > <text slot="title" class="u-page__item__title__slot-title">文档指南</text> <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> </u-collapse-item> <u-collapse-item title="组件全面" > <u-icon name="tags-fill" size="20" slot="icon"></u-icon> <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> </u-collapse-item> <u-collapse-item title="众多利器" > <text slot="value" class="u-page__item__title__slot-title">自定义内容</text> <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> </u-collapse-item> </u-collapse> </view> </template> <style lang="scss"> .u-page { padding: 0; &__item { &__title { color: $u-tips-color; background-color: $u-bg-color; padding: 15px; font-size: 15px; &__slot-title { color: $u-primary; font-size: 14px; } } } } .u-collapse-content { color: $u-tips-color; font-size: 14px; } </style>
