card-drag-sort
0.0.8 • Public • Published
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 |
属性 |
描述 |
类型 |
是否必填 |
默认值 |
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 |
Dependencies (1)
Dev Dependencies (10)
Package Sidebar
Install
Weekly Downloads