vue3 卡片拖拽排序组件

安装

npm install card-darg-sort

使用

<template>
  ...
  <card-drag-sort></card-drag-sort>
  ...
</template>

<style setup lang="ts">
import { CardDragSort } from 'card-drag-sort'
...
</style>

属性

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | ----------- | -------------------------- | ------ | -------- | ------ | | data | 传入的卡片数据，详情见下表 | Array | Y | - | | columns | 卡片排列的列数 | Number | N | 3 | | width | 卡片的宽度 | Number | N | 500 | | height | 卡片的高度 | Number | N | 300 | | columnSpace | 卡片列间距 | Number | N | 20 | | rowSpace | 卡片行间距 | Number | N | 20 | | duration | 过渡效果时间，单位毫秒 | Number | N | 200 |

data

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | ----- | -------------- | ------ | -------- | ------ | | id | 卡片的唯一标识 | String | Y | - | | title | 卡片的标题 | String | N | 无标题 |

插槽

| 属性 | 描述 | 类型 | | ------- | ---------- | ---- | | header | 自定义标题 | - | | content | 自定义内容 | - |

<card-drag-sort :data="data">
  <template #header="{ card }">
    {{ card.title }}
  </template>
  <template #content="{ card }">
    <div v-if="card.id === 'one'">
      <!-- 自定义内容 -->
    </div>
    ...
  </template>
</card-drag-sort>

事件

| 事件名 | 描述 | 类型 | | ---------- | ------------------------------------------- | -------- | | drag-start | 点击卡片顶部标题栏时触发，参数为卡片唯一 id | Function | | drag-end | 在松开鼠标时触发，参数为最新卡片顺序 | Function |