Rainui

Appearance

r-collapse ​

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

示例 ​

vue
<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 ​

名称说明类型默认值可选值
value当前展开面板的 nameString | Number | Array''-
accordion是否开启手风琴模式Booleanfalse
border是否显示外边框Booleantrue
themeNamer-theme 主题名称Stringdefault

CollapseItem Props ​

名称说明类型默认值可选值
name唯一标识符，默认为索引值String | Number--
icon标题栏左侧图标名称，等同于 r-icon 组件的 name 属性String
size标题栏大小Stringlarge
title标题栏左侧内容String | Number
value标题栏右侧内容String | Number
label标题栏描述信息String | Number
border是否显示内边框Booleantrue
isLink是否展示标题栏右侧箭头并开启点击反馈Booleantrue
disabled是否禁用面板Booleanfalse
readonly是否为只读状态，只读状态下无法操作面板Booleanfalse
titleClass左侧标题额外类名String
valueClass右侧内容额外类名String
labelClass描述信息额外类名String
themeNamer-theme 的主题名称Stringdefault

CollapseItem Slots ​

名称说明
default面板内容
title自定义标题栏左侧内容
value自定义标题栏右侧内容
label自定义标题栏左侧图标
icon默认插槽
rightIcon自定义标题栏右侧图标

Collapse Slots ​

名称说明
default默认插槽

Collapse Events ​

名称说明回调参数
update:value切换面板时触发activeNames: 类型与 v-model 绑定的值一致
change切换面板时触发activeNames: 类型与 v-model 绑定的值一致

更多组件，请前往rainui