V3 Bento
A simple bento layout component for Vue3.
Installation
Usage
Wrap the child component to be dragged with the Bento and BentoItem components.
<!-- Usage.vue -->
<Bento
:bentoCells="bentoCells"
class="!h-[610px] overflow-y-auto overflow-x-hidden p-[10px] box-content"
:size="140"
:disabled="false"
:gap="10"
:maximum-cells="4"
@drag-end="(e: any) => console.log(e)"
@drag-start="(e: any) => console.log(e)"
>
<BentoItem
v-for="item in bentoCells"
:key="item.id"
:id="item.id"
:x="item.x"
:y="item.y"
:width="item.width"
:height="item.height"
>
<Cell :url="'./' + item.id + '.svg'" :bg="'#fff'" />
</BentoItem>
</Bento>
Demo
Properties
<Bento />
| Prop | Type | Default | Require | Default |
|---|
| bentoCells | BentoItemProps[] | | true | 每个格子 |
|---|
| maximumCells | number | | true | 每一行最大格子数量 |
|---|
| size | number | | true | 格子的大小 |
|---|
| gap | number | 10 | false | 格子的间距 |
|---|
| disabled | boolean | false | false | 是否禁用拖拽 |
|---|
| commonClass | string | `bento-item` | false | 格子的类名 |
|---|
<BentoItem />
| Prop | Type | Default | Require | Default |
|---|
| id | string | | true | 格子的 ID |
|---|
| x | number | 0 | true | 格子的 x 轴坐标 |
|---|
| y | number | 0 | true | 格子的 y 轴坐标 |
|---|
| width | number | 1 | false | 每个单元格在 X 方向上占多大的格子 |
|---|
| height | number | 1 | false | 每个单元格在 Y 方向上占多大的格子 |
|---|
Events
<Bento />
| Name | Return | Description |
|---|
| dragStart | cell | 拖拽开始，返回选中拖拽的那个格子对象 |
|---|
| dragEnd | bentoCells | 拖拽结束，返回排序后的 bentoCells 数组 |
|---|
Slot
<Bento />
| Name | Required | Description |
|---|
| bento-item-placeholder | false | 拖拽的时候的占位要素 |
|---|
| empty | false | 数组对象要是为空显示的 DOM |
|---|