rnl-collapse 是基于element-plus的折叠面板组件二次开发得来，头部支持左右插槽，背景色变化。

本插件是基于 jsx开发

使用方法

1.0.9之后版本使用

引入css
import 'rnl-collapse/dist/style.css'
全局注册
import RNL from 'rnl-collapse'

局部注册
import { RnlCollapse, RnlCollapseItem } from 'rnl-collapse'

1.0.6版本之前需要安装依赖包

npm install --save-dev @vitejs/plugin-vue-jsx
npm install -D typescript-plugin-css-modules
element-plus
以上依赖包必须安装并在vite.config中配置好

CONTENTS

props 属性|意思 -|:-: title|头部名字 showBgAndBr|显示高亮边框和背景

slot 属性|意思 -|:-: leftSlot|用于扩展复选框 rightSlot|自定义头部 default|默认内容

1.0.7版本之前示例

import { ref } from 'vue';
import RnlCollapse, {CollapseItem} from 'rnl-collapse'


const activeName = ref(1)

<template>
  <div class="" style="padding: 0 10px; margin-top: 10px;"> 
    <RnlCollapse v-model="activeName">
        <CollapseItem v-for="i in 10" :key="i" :title="`第${i}个`" :name="i">
          <template #rightSlot>
            <div style="display: flex; justify-content: space-between;">
              <span>头部内容</span>
              <span>2</span>
            </div>
          </template>
          <template #leftSlot>
            <el-checkbox style="margin-left: 16px;" />
          </template>
          <div v-for="i in 10">112421421</div>
        </CollapseItem>
    </RnlCollapse>
  </div>
</template>