Collapse 折叠面板

预览

01:38



---

组件名：rice-collapse、rice-collapse-item

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

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过v-model 控制展开的面板列表

<rice-collapse v-model="opened">
  <rice-collapse-item name="a" :title="title1" :content-text="text1"></rice-collapse-item>
  <rice-collapse-item name="b" :title="title2" :content-text="text2"></rice-collapse-item>
  <rice-collapse-item name="c" :title="title3">
    <text class="text">{{text3}} 当前打开的面板：{{opened.join('-')}}</text>
  </rice-collapse-item>
</rice-collapse>

<script setup>
  const opened = ref(['a'])
</script>

手风琴

通过 accordion 可以设置为手风琴模式，最多展开一个面板，此时 activeName 为字符串格式。

<rice-collapse accordion border>
  <rice-collapse-item :title="title1" :content-text="text1"></rice-collapse-item>
  <rice-collapse-item :title="title2" :content-text="text2"></rice-collapse-item>
  <rice-collapse-item :title="title3" :content-text="text3"></rice-collapse-item>
</rice-collapse>

禁用状态

通过 disabled 属性来禁用单个面板。 通过 readonly 属性设置单个面板为只读。

<rice-collapse-item :title="`${title1} (只读)`" readonly :content-text="text1"></rice-collapse-item>
<rice-collapse-item :title="title2" disabled>
  <text class="text">{{text2}}</text>
</rice-collapse-item>
<rice-collapse-item :title="title3" disabled>
  <text class="text">{{text3}}</text>
</rice-collapse-item>

自定义标题

<rice-collapse accordion v-model="value">
  <rice-collapse-item :title="title1" name="a">
    <template #title>
      <view class="slot-title">
        <text class="slot-title__text">{{title1}}</text>
        <rice-icon name="like-fill" color="#f56c6c" />
      </view>
    </template>
    <template #value>
      <text class="slot-value">{{value=='a'?'收起':'展开'}}</text>
    </template>
    <text class="text">{{text1}}</text>
  </rice-collapse-item>
  <rice-collapse-item :title="title2" name="b" :value="value=='b'?'收起':'展开'">
    <text class="text">{{text2}}</text>
    <template #rightIcon>
      <rice-icon :name="value=='b'?'arrow-down':'arrow-right'"></rice-icon>
    </template>
  </rice-collapse-item>
</rice-collapse>

API

Collapse Props

属性名	类型	说明	默认值
v-model\ model-value	String|Array	当前活动面板，在手风琴模式下类型是string|number，非手风琴模式下类型是(number | string)[]	-
accordion	Boolean	是否手风琴模式 默认false	-
border	Boolean	是否显示上下边框，默认 false	-
duration	Number	动画过渡时间，单位ms，默认 250	-
custom-style	Object	自定义样式	-

CollapseItem Props

属性名	类型	说明	默认值
name	String|Number	唯一标识	-
icon	String	标题栏左侧图标名称，等同于Icon组件的name属性	-
title	String|Number	标题栏左侧内容	-
value	String|Number	标题栏右侧内容	-
content-text	String|Number	内容区域文字	-
duration	Number	动画过渡时间单位ms，默认 250	-
arrow	Boolean	是否显示右侧的箭头，默认true	-
clickable	Boolean	是否开启点击反馈，默认true	-
border	Boolean	是否显示标题下面的边框，默认true	-
content-border	Boolean	是否显示内容区域下面的边框，默认true	-
disabled	Boolean	是否禁用，默认false	-
readonly	Boolean	是否只读，默认false	-
title-style	Boolean	标题栏左侧样式	-
value-style	Boolean	标题栏右侧样式	-
content-style	Boolean	展开的内容区域样式	-
custom-style	Object	自定义样式	-

Collapse Events

事件名	说明	回调参数
change	切换面板时触发	(Array<string | number> | string | number)

Slot

名称	说明
default	内容区域
leftIcon	左侧图标
title	标题
value	右侧内容
rightIcon	右侧图标

类型定义

组件导出如下类型

const collapseRef=ref<RiceCollapseComponentPublicInstance|null>(null)
const collapseItemRef=ref<RiceCollapseItemComponentPublicInstance|null>(null)