更新记录

1.0.9（2024-08-06） 下载此版本

修改文档

1.0.8（2024-07-30） 下载此版本

适配r-config-provider

1.0.7（2024-07-26） 下载此版本

更新依赖

平台兼容性

r-collapse

r-collapse折叠面板组件，将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

示例

<template>
  <view class="content">
    <!-- <r-badge :content="20" /> -->

    <r-config-provider>
      <view style="padding: 20px">基础使用</view>
      <r-collapse v-model:value="activeNames">
        <r-collapse-item title="标题1" name="1">
          代码是写出来给人看的，附带能在机器上运行。
        </r-collapse-item>
        <r-collapse-item title="标题2" name="2">
          技术无非就是那些开发它的人的共同灵魂。
        </r-collapse-item>
        <r-collapse-item title="标题3" name="3">
          在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
        </r-collapse-item>
      </r-collapse>
      <view style="padding: 20px">手风琴</view>
      <r-collapse v-model:value="activeName2" accordion>
        <r-collapse-item title="标题1" name="1">
          代码是写出来给人看的，附带能在机器上运行。
        </r-collapse-item>
        <r-collapse-item title="标题2" name="2">
          技术无非就是那些开发它的人的共同灵魂。
        </r-collapse-item>
        <r-collapse-item title="标题3" name="3">
          在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
        </r-collapse-item>
      </r-collapse>
      <view style="padding: 20px">禁用状态</view>
      <r-collapse v-model:value="activeNames3">
        <r-collapse-item title="标题1" name="1">
          代码是写出来给人看的，附带能在机器上运行。
        </r-collapse-item>
        <r-collapse-item title="标题2" name="2" disabled>
          技术无非就是那些开发它的人的共同灵魂。
        </r-collapse-item>
        <r-collapse-item title="标题3" name="3" disabled>
          在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
        </r-collapse-item>
      </r-collapse>
      <view style="padding: 20px">自定义标题内容</view>
      <r-collapse v-model:value="activeNames4">
        <r-collapse-item name="1">
          <template #title>
            <div>标题1 <r-icon name="question-o" /></div>
          </template>
          代码是写出来给人看的，附带能在机器上运行。
        </r-collapse-item>
        <r-collapse-item title="标题2" name="2" icon="shop-o">
          技术无非就是那些开发它的人的共同灵魂。
        </r-collapse-item>
      </r-collapse>
    </r-config-provider>
  </view>
</template>
<script setup>
import { ref } from "vue";
const activeNames = ref(["1"]);
const activeName2 = ref(["1"]);
const activeNames3 = ref(["1"]);
const activeNames4 = ref(["1"]);
const activeNames5 = ref(["1"]);
const collapse = ref(null);
const openAll = () => {
  collapse.value.toggleAll(true);
};
const toggleAll = () => {
  collapse.value.toggleAll();
};
</script>

API

Collapse Props

CollapseItem Props

CollapseItem Slots

Collapse Slots

Collapse Events

更多组件，请前往rainui