54 lines
1.1 KiB
Markdown
54 lines
1.1 KiB
Markdown
# @apigo.cc/kanban API 手册
|
||
|
||
原生 Web Component 编写的轻量级看板组件。支持响应式数据绑定与自动拖拽排序。
|
||
|
||
---
|
||
|
||
## 1. 引入方式 (UMD 优先)
|
||
|
||
在 HTML 中引入脚本即刻注册 `<web-kanban>` 自定义标签。
|
||
|
||
```html
|
||
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/kanban@1.0.1/dist/kanban.min.js"></script>
|
||
|
||
<script>
|
||
// 直接操作全局 Kanban 类或 DOM 元素
|
||
console.log(Kanban);
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 核心用法
|
||
|
||
### 组件化用法 (推荐)
|
||
直接在 HTML 中使用 `<Kanban>` 标签，通过 `state` 进行数据绑定。
|
||
|
||
```html
|
||
<div $data="{
|
||
myBoard: [
|
||
{ id: 'todo', title: '待办', items: [{ id: '1', content: '任务 1' }] }
|
||
]
|
||
}">
|
||
<Kanban $.state.data="myBoard"></Kanban>
|
||
</div>
|
||
```
|
||
|
||
### JS 直接调用
|
||
...
|
||
---
|
||
|
||
## 3. API 参考
|
||
|
||
### 属性
|
||
- **`.data`**: 设置或获取看板数组。
|
||
|
||
### 事件
|
||
- **`@update`**: 拖拽结束且位置变动时触发，`detail` 为全量新数据。
|
||
|
||
---
|
||
|
||
## 开发者提示 (AI 必读)
|
||
1. **样式隔离**: 组件使用 Shadow DOM，外部 CSS 无法影响内部。
|
||
2. **全局变量**: UMD 模式下，`Kanban` 类自动挂载到 `window`。
|