更新记录

1.0.0（2026-07-17） 下载此版本

• 初始版本
• 折叠面板组件，分为标题行与内容行
• 标题行左侧图标支持竖条(bar) / 圆形(circle) / 无(none)
• 支持自定义图标颜色、标题颜色、箭头颜色（即“牙呢”——颜色自定义）
• 标题行高度默认 33，可配置
• 新增 bgColor 属性，可自定义面板背景色（标题行 + 内容行），默认 #fff
• 新增 titleBorder 属性（原 border），控制是否显示标题行底线，默认显示
• 新增 borderColor 属性，可自定义底线颜色
• 新增 bodyBorder 属性，控制展开后内容区下边界线，默认显示
• 新增 arrowSize 属性，可自定义右侧箭头大小（单位 rpx），默认 13
• 新增 bodyHeight 属性，限制内容区高度（0 不限制；数值或带单位值超出则显示竖向滚动条）
• 右侧折叠/展开箭头图标，点击切换内容显示
• 兼容 Vue2 / Vue3，支持 H5 / 小程序 / App

平台兼容性

uni-app(5.14)

jx-collapse 折叠面板

折叠面板组件，支持 Vue2 / Vue3，可运行于 H5 / 各类小程序 / App。

组件分为两行：

• 标题行：左侧可自定义图标（竖条 bar / 圆形 circle / 无 none），中间为标题内容，右侧为折叠/展开箭头图标，点击整行切换内容显示。
• 内容行：默认插槽，根据展开状态显示/隐藏。

平台兼容

属性（Props）

事件（Events）

插槽（Slots）

使用示例

Vue3（v-model:open）

<template>
    <jx-collapse
        title="基本信息"
        icon="bar"
        icon-color="#ff5500"
        bg-color="#e8f3ff"
        :height="40"
        v-model:open="show"
        @change="onChange"
    >
        <view>这里是折叠的内容区域</view>
    </jx-collapse>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(false);
const onChange = (val) => console.log('展开状态：', val);
</script>

Vue2（:open.sync）

<template>
    <jx-collapse
        title="基本信息"
        icon="circle"
        icon-color="#09bb07"
        bg-color="#e6f9e6"
        :open.sync="show"
        @change="onChange"
    >
        <view>这里是折叠的内容区域</view>
    </jx-collapse>
</template>

<script>
export default {
    data() {
        return { show: false };
    },
    methods: {
        onChange(val) {
            console.log('展开状态：', val);
        }
    }
};
</script>

自定义标题内容（插槽）

<jx-collapse icon="circle">
    <template #title>
        <text style="color:#f00;">自定义标题</text>
    </template>
    <view>自定义内容</view>
</jx-collapse>