79 lines
1.5 KiB
Markdown
79 lines
1.5 KiB
Markdown
|
# @web/kanban
|
||
|
|
|
||
|
|
原生 ESM 驱动的极简看板引擎，专注于无状态渲染与高性能拖拽。
|
||
|
|
|
||
|
|
## 核心特性
|
||
|
|
- **零依赖**: 仅使用原生 Web Components 与 Drag & Drop API。
|
||
|
|
- **双轨分发**: 提供源码版 `kanban.js` 与压缩版 `kanban.min.js`。
|
||
|
|
- **高性能**: 支持数百个看板项的丝滑交互。
|
||
|
|
|
||
|
|
## 快速上手
|
||
|
|
|
||
|
|
### 1. 引入模块
|
||
|
|
使用 `loader.js` 或直接通过 `importmap` 引入：
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"@web/kanban": "./dist/kanban.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script type="module">
|
||
|
|
import '@web/kanban';
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. 使用组件
|
||
|
|
```html
|
||
|
|
<web-kanban id="my-kanban"></web-kanban>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
const kanban = document.querySelector('#my-kanban');
|
||
|
|
|
||
|
|
// 注入数据
|
||
|
|
kanban.data = [
|
||
|
|
{
|
||
|
|
id: 'todo',
|
||
|
|
title: '待处理',
|
||
|
|
items: [
|
||
|
|
{ id: '1', content: '任务一' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'done',
|
||
|
|
title: '已完成',
|
||
|
|
items: []
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
// 监听更新
|
||
|
|
kanban.addEventListener('@update', (e) => {
|
||
|
|
console.log('最新数据:', e.detail);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
## API 参考
|
||
|
|
|
||
|
|
### 属性 (Properties)
|
||
|
|
- `data`: `Array<Column>` - 获取或设置看板数据。
|
||
|
|
|
||
|
|
### 数据结构 (Types)
|
||
|
|
```typescript
|
||
|
|
interface Column {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
items: Item[];
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Item {
|
||
|
|
id: string;
|
||
|
|
content: string;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 事件 (Events)
|
||
|
|
- `@update`: 当看板项位置发生变化时触发。`event.detail` 包含完整的 `Column[]` 数据。
|