更新记录

1.0.0（2024-05-15） 下载此版本

初始化组件

平台兼容性

uni-app

# kaye-drag 折叠面板拖拽排序

• 本组件只简单实现了可拖拽排序的折叠面板功能，提供一种高度可变化的拖拽排序思路，具体实现根据不同需求调整

• 可下载示例查看具体使用方式

• 目前仅在微信小程序端测试使用正常，其他平台未测试

使用

• html使用部分

    <view class="content">
        <drag-collapse-list :list="dataLists" @change="sortChange" :disabled="disableDrag"></drag-collapse-list>
    </view>

• 其中dataLists格式如下

dataLists: [
    {
        title: '展开列表1',
        detail: [{ content: '内容1' }, { content: '内容2' }, { content: '内容3' }, { content: '内容4' }]
    }
]

• 关于折叠面板样式，可以自行调整对应slot内容
• 注意：不同的折叠面板样式，需要对应调整折叠高度：itemHeight、面板展开高度：openHeight高度。

  <common-collapse @clickContent="clickContent" @openCollapse="openCollapse" :open="open">
  <view slot="title" class="title">
      <view class="flex-row">
          <view class="line"></view>
          <view class="name">{{ collapseInfo.title }}</view>
      </view>
  </view
  <view slot="content" class="contents">
      <view v-for="(item, index) in collapseInfo.detail" :key="index" :class="[(index + 1) % 3 === 0 ? 'item-container-3' : '', 'item-container']">
          <view class="content">{{ item.content }}</view>
      </view>
  </view>
  </common-collapse>