更新记录

1.0.4（2023-05-23） 下载此版本

• 修改已知问题；

• 代码优化；

• 注意插件符合uni_modules规范，使用时直接点击插件详情页导入hbuilderx，然后在要使用的页面直接通过标签（参考插件使用示例代码）引入即可。

1.0.3（2023-05-05） 下载此版本

• 针对vue3部分编译器语法警告优化；
• readme示例代码提供请求后再更新数据逻辑示例；
• 注意插件符合uni_modules规范，使用时直接点击插件详情页导入hbuilderx，然后在要使用的页面直接通过标签（参考插件使用示例代码）引入即可。

1.0.2（2023-05-04） 下载此版本

• 针对用户反馈，代码细节进行了优化；
• 注意插件符合uni_modules规范，使用时直接点击插件详情页导入hbuilderx，然后在要使用的页面直接通过标签（参考插件使用示例代码）引入即可。

平台兼容性

uni-app

其他

kevy-collapse

介绍

这是一个全端通用的折叠面板组件，可以折叠/展开的内容区域，支持复杂的表格形式展示，简单的设置即可实现，节省效率必备。

• 插件含全部源码，可以给您无限实现可能，随心所欲自定义你的功能；
• 符合uni_modules和easycom规范，直接导入即可通过标签引入使用。

祝您使用愉快，本插件会长期维护更新，开源不易，如果本插件对您有帮助的话请及时点个好评吧或者赞赏一下，总之谢谢您的鼓励啦。

方法和属性

collapseData字段说明（内部为Object对象）

tableData说明

使用方式

插件详情页点击导入hbuilder即可。插件符合uni_modules和easycom规范，导入后可直接在页面通过标签引用。

代码使用示例

<template>
    <view class="content">
        <kevy-collapse :collapse-data="contentData" :accordion="false" arrow-color="#00A29A" @itemClick="myClick"
            content-color="blue" :content-font-size="32" color="#00A29A" :font-size="32"></kevy-collapse>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                contentData: []
            }
        },
        onLoad() {
            //这里模拟请求到数据赋值给组件
            this.contentData = [{
                    title: '我是标题加粗的默认展开的',
                    content: '我设置了open:true\nbold:true\n就会得到\n现在的效果了',
                    open: true, //手风琴默认只能开启一个，若开启多个只会展开最前面的一个
                    bold: true, //是否加粗，默认加粗
                },
                {
                    title: '我是标题不加粗的默认展开的',
                    content: '我设置了open:true bold:false就会得到现在的效果了',
                    bold: false,
                    open: true,
                },
                {
                    title: '我是内容是表格形式的',
                    content: //这里的数据格式采用下方的表格方式传递
                    {
                        head: ['项目', '单价', '使用量', '金额'],
                        data: [
                            ["垃圾费", "¥6.09", '1', '¥6.09'],
                            ["物业费", "¥6.09", '1', '¥6.09'],
                            ["电梯费", "¥6.09", '1', '¥6.09'],
                            ["公摊费", "¥6.09", '1', '¥6.09'],
                        ],
                        bordered: false, //表格body每行tr是否有底部边框，默认false
                    },
                    bold: false,
                    open: true,
                    table: true, //设置table为true即开启表格模式
                },
                {
                    title: '我是禁用的且不显示箭头',
                    content: '通过设置disabled和hideArrow达到这样的效果哦',
                    bold: true,
                    disabled: true, //是否禁用，默认不禁用
                    hideArrow: true, //是否隐藏箭头，默认不隐藏
                },
                {
                    title: '我是超长标题我是超长标题我是超长标题我是超长标题我是超长标题',
                    content: '超长标题会...隐藏哦',
                    bold: true,
                }
            ];
        },
        methods: {
            //点击事件，返回下标和展开状态,e示例数据：{"index":1,"open":false}
            myClick(e) {
                console.log("当前点击的下标是：" + e.index + ";打开状态是：" + e.open);
            }
        }
    }
</script>

<style>
    .content {
        width: 100%;
        padding: 0rpx 30rpx;
        box-sizing: border-box;
    }
</style>