文档/概览

示例

附带代码的在线演示——你看到的每个文件都在页面上运行。可以直接复制，或在 StackBlitz 中打开。

本页由 AI 翻译，可能存在不准确之处。阅读英文原文

每个示例都是一个小型 Vue 应用：一个带有 DnDProvider 的 index.vue，以及它需要的组件。演示下方的代码标签页正是运行它的那些文件。

应用

完整的界面，按你实际会构建的方式来写：多个列表、规则、浮层和键盘协同工作。

项目看板

可以重新排序的列、WIP 上限、移入 Done 前的确认、多选和垃圾桶。

周日历

在各天和各个半小时之间拖动的日程，吸附到网格。

文件管理器

一棵文件夹树和一个文件网格：框选、放到文件夹上、按住 Alt 复制。

块编辑器

类似 Notion 的块：通过手柄移动、可以嵌套，还能从“/”菜单或侧边栏拖进来。

国际象棋

合法走法会亮起，手中的棋子会说明某个格子为什么被拒绝，兵会询问要升变成什么，机器人用真实的拖拽回应。

表单构建器

从面板拖出 Nuxt UI 字段，在行中并排摆放，在实时预览中填写，并导出为 Vue 代码。

设计画布

可缩放画布上的画框和图层、智能参考线、按 Alt 复制，以及作为设计树的图层面板。

页面构建器

在页面上方变成真实内容的区块、在列之间移动的元素、基于同一份数据的图层树、行内编辑。

数据表格

一个包含 2,000 个任务的 Nuxt UI 表格：虚拟化、可搜索，通过行的抓手排序。