Collapse 折叠面板

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

平台差异说明

基本使用

默认为手风琴模式，即打开一个，另外所有的都会关闭。可以将u-collapse的accordion设置为false，这样可以允许打开多个面板

<template>
    <u-collapse>
        <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
            {{item.body}}
        </u-collapse-item>
    </u-collapse>
</template>
<script>
    export default {
        data() {
            return {
                itemList: [{
                    head: "赏识在于角度的转换",
                    body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
                    open: true,
                    disabled: true
                },{
                    head: "生活中不是缺少美，而是缺少发现美的眼睛",
                    body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
                    open: false,
                },{
                    head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
                    body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
                    open: false,
                }],
            }
        }
    }
</script>

控制面板的初始状态，以及是否可以操作

• 设置u-collapse-item的open参数为true，可以让面板初始化时为打开状态
• 如果设置u-collapse-item的disabled参数为true，那么面板会保持初始状态，无法关闭或打开

<template>
    <u-collapse>
        <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open" :disabled="item.disabled">
            {{item.body}}
        </u-collapse-item>
    </u-collapse>
</template>
<script>
    export default {
        data() {
            return {
                itemList: [{
                    head: "赏识在于角度的转换",
                    body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
                    open: true,
                    disabled: true
                },{
                    head: "生活中不是缺少美，而是缺少发现美的眼睛",
                    body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
                    open: false,
                },{
                    head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
                    body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
                    open: false,
                }],
            }
        }
    }
</script>

API

Collapse Props

Collapse Item Props

Collapse Event

注意：请在<u-collapse></u-collapse>上监听此事件

Collapse Item Event

注意：请在<u-collapse-item></u-collapse-item>上监听此事件