uView Collapse 折叠面板

通过折叠面板收纳内容区域

#平台差异说明

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参数，那么面板会保持被禁用状态

copy

#手风琴模式

• 将u-collapse的accordion设置为true，这样可以开启手风琴模式

copy

#自定义标题和内容

• 通过设置slot来自定义标题和内容