x-next 1.12.0 → 1.14.0

package/AI_USAGE/components/dialog.md

@@ -1,12 +1,14 @@
 <!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
 # Dialog AI 使用
 
-适用版本：x-next@1.12.0；来源指纹：`9f9adf42b42dc1e551f500aabdcb7fb07b69a93ea44ff3dc1d16dab1a4c85843`。
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
 
-先读 [通用接入](../core.md)。公开导出：`DialogComponent, Dialog`；模型：v-model；已核对事件：close、closed。
+先读 [通用接入](../core.md)。公开导出：`Dialog, DialogComponent`；主要模型：v-model。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./dialog-api.md)，包含本组件族全部子组件和别名。
 
 按需样式：`x-next/style/dialog`（包含 base.css、button.css、dialog.css、space.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
 
+## 已核验行为与示例
+
 [组件文档与 live demo](https://x-next.yjmf.com/components/dialog)。从根入口导入 `DialogComponent as XDialog`，普通 `v-model` 为布尔值且默认 `false`。`renderTo='body'`、`mask=true`、`maskToClose=true`、`escToClose=true`、`destroyOnClosed=true`；`width` 支持数字或 CSS 长度。
 
 `title`、默认正文、`footer` 是公开插槽，默认不生成业务按钮。`close(action, event?)` 的 action 为 `'cancel' | 'ok'`，`closed` 表示关闭动画结束；直接改模型不会调用业务取消逻辑。根入口服务 `Dialog(options)` 返回 `close()` / `update(options)` 句柄。
@@ -34,4 +36,283 @@ function cancel() { feedback.value = '已取消'; visible.value = false; }
 </template>
 ```
 
-返回 [AI 索引](../index.md)。精选示例不是完整 API 表，新能力先查同版本公开类型与组件文档。
+## 场景用法
+
+以下示例从本地 `src/docs/components/dialog.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./dialog-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+用于承载需要用户聚焦处理的确认、编辑或详情内容。
+
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button, DialogComponent, Space } from 'x-next';
+import { ref } from 'vue';
+
+const visible = ref(false);
+</script>
+<template>
+<Button type="primary" @click="visible = true">打开对话框</Button>
+  <DialogComponent v-model="visible" title="标题" width="520px">
+    内容
+    <template #footer="{ cancel, ok, loadingObj }">
+      <Space>
+        <Button :loading="loadingObj.cancel" @click="cancel">取消</Button>
+        <Button type="primary" :loading="loadingObj.ok" @click="ok">确认</Button>
+      </Space>
+    </template>
+  </DialogComponent>
+</template>
+```
+
+### 异步关闭
+
+一次异步关闭等待期间，确认、取消、关闭图标、遮罩和 Escape 共用防重保护。回调返回 false、抛错或拒绝时保持打开；外部关闭后重新打开，会使上一轮等待结果失效。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button, DialogComponent, Space } from 'x-next';
+import { ref } from 'vue';
+
+const visible = ref(false);
+
+const beforeClose = async (action: 'cancel' | 'ok') => {
+  if (action === 'cancel') return false;
+  await new Promise((resolve) => window.setTimeout(resolve, 1200));
+  return true;
+};
+</script>
+<template>
+<Button type="primary" @click="visible = true">异步确认</Button>
+  <DialogComponent v-model="visible" title="提交确认" :on-before-cancel="beforeClose">
+    确认按钮会等待异步任务完成；取消按钮会被拦截并保持打开。
+    <template #footer="{ cancel, ok, loadingObj }">
+      <Space>
+        <Button :loading="loadingObj.cancel" @click="cancel">取消</Button>
+        <Button type="primary" :loading="loadingObj.ok" @click="ok">提交</Button>
+      </Space>
+    </template>
+  </DialogComponent>
+</template>
+```
+
+### 显示方式
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button, DialogComponent } from 'x-next';
+import { ref } from 'vue';
+
+const centerVisible = ref(false);
+const topVisible = ref(false);
+const fullscreenVisible = ref(false);
+</script>
+<template>
+<div class="demo-inline-group">
+    <Button @click="centerVisible = true">居中</Button>
+    <Button @click="topVisible = true">顶部距离</Button>
+    <Button @click="fullscreenVisible = true">全屏</Button>
+  </div>
+  <DialogComponent v-model="centerVisible" center title="居中对话框" />
+  <DialogComponent v-model="topVisible" title="自定义顶部距离" top="80px" />
+  <DialogComponent v-model="fullscreenVisible" title="全屏对话框" fullscreen />
+</template>
+```
+
+### 保留内容状态
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button, DialogComponent, Input } from 'x-next';
+import { ref } from 'vue';
+
+const visible = ref(false);
+const text = ref('');
+</script>
+<template>
+<Button @click="visible = true">打开并保留内容</Button>
+  <DialogComponent v-model="visible" title="关闭后保留内容" :destroy-on-closed="false">
+    <Input v-model="text" placeholder="关闭后再次打开，内容仍会保留" />
+  </DialogComponent>
+</template>
+```
+
+### 命令式调用
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button } from 'x-next';
+import { Dialog } from 'x-next';
+
+const openCommandDialog = () => {
+  Dialog({
+    title: '提交确认',
+    content: '确认提交当前表单吗？',
+    onOk: () => console.log('ok'),
+  });
+};
+
+const openNoFooterDialog = () => {
+  Dialog({
+    title: '说明',
+    content: () => 'footer=false 时不会显示底部按钮',
+    footer: false,
+  });
+};
+
+const openManualDialog = () => {
+  const instance = Dialog({
+    title: '处理中',
+    content: '3 秒后关闭',
+  });
+  window.setTimeout(() => instance.update({ content: '即将关闭' }), 1500);
+  window.setTimeout(() => instance.close(), 3000);
+};
+</script>
+<template>
+<div class="demo-inline-group">
+    <Button type="primary" @click="openCommandDialog">命令式打开</Button>
+    <Button @click="openNoFooterDialog">无底部按钮</Button>
+    <Button @click="openManualDialog">手动更新关闭</Button>
+    <Button @click="Dialog.destroyAll()">关闭全部</Button>
+  </div>
+</template>
+```
+
+### 局部容器
+
+`renderTo` 接受选择器或 `HTMLElement`。宿主应在打开前已经挂载，找不到目标时会回退到 `body`；为局部弹层提供明确的宽高。局部宿主使用定位上下文，静态定位的宿主会在打开期间临时设置为 `position: relative`，弹层根使用绝对定位。关闭动画结束或组件卸载后恢复原始内联样式；同一宿主上的多个 Dialog 会保持锁定，直到最后一个关闭。
+
+局部遮罩只覆盖宿主区域，`overflow: hidden` 会裁剪超出区域的弹层内容。全屏及页面级模态交互建议使用默认 `body` 宿主；局部容器的尺寸、祖先裁剪和层叠上下文仍由业务布局控制。`disabled` 仅关闭 Teleport，适合内联渲染，不代表禁用 Dialog 交互，也不取消 `renderTo` 对应的滚动锁。
+
+### 切换宿主与嵌套对话框
+
+打开后可修改 `renderTo`，滚动锁会从旧宿主转移到新宿主。下面的两个 Dialog 使用同一个目标，关闭其中一层仍保留另一层的锁；关闭后可滚动宿主查看恢复效果。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button } from 'x-next';
+import { Dialog } from 'x-next';
+
+const openLocalDialog = () => {
+  Dialog({
+    title: '局部容器',
+    content: 'renderTo 找不到目标时会回退到 body',
+    renderTo: '#dialog-local-container',
+  });
+};
+</script>
+<template>
+<Button @click="openLocalDialog">挂载到局部容器</Button>
+  <div id="dialog-local-container" class="dialog-local-container"></div>
+</template>
+```
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { ref } from 'vue';
+import { DialogComponent } from 'x-next';
+import 'x-next/style/base.css';
+import 'x-next/style/dialog.css';
+
+const visible = ref(false);
+const nestedVisible = ref(false);
+const target = ref('#dialog-host-a');
+</script>
+<template>
+<button @click="visible = true">打开局部对话框</button>
+  <div class="dialog-host-row">
+    <div id="dialog-host-a" class="dialog-host"><div class="host-content">宿主 A</div></div>
+    <div id="dialog-host-b" class="dialog-host"><div class="host-content">宿主 B</div></div>
+  </div>
+  <DialogComponent v-model="visible" :render-to="target" title="局部编辑" width="280px" top="24px" :mask-to-close="false">
+    <p>当前宿主：{{ target === '#dialog-host-a' ? 'A' : 'B' }}</p>
+    <button @click="target = target === '#dialog-host-a' ? '#dialog-host-b' : '#dialog-host-a'">切换宿主</button>
+    <button @click="nestedVisible = true">打开第二层</button>
+  </DialogComponent>
+  <DialogComponent v-model="nestedVisible" :render-to="target" title="第二层" width="260px" top="48px">
+    关闭这一层后，下层对话框仍保持宿主滚动锁。
+  </DialogComponent>
+</template>
+<style scoped>
+.dialog-host-row { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
+.dialog-host { position: relative; flex: 1 1 300px; height: 320px; overflow: auto; }
+.host-content { min-height: 640px; }
+</style>
+```
+
+### Dialog Options
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `title` | 标题 | `DialogContent` | `-` |
+| `content` | 正文内容 | `DialogContent` | `-` |
+| `footer` | 自定义底部；`false` 时隐藏底部 | `boolean \| VNode \| (scoped) => DialogRenderResult` | 默认按钮 |
+| `okText` | 确认按钮文案 | `string` | `'确认'` |
+| `cancelText` | 取消按钮文案 | `string` | `'取消'` |
+| `mask` | 是否显示遮罩 | `boolean` | `true` |
+| `maskToClose` | 点击遮罩是否关闭 | `boolean` | `true` |
+| `beforeOnOk` | 确认前拦截 | `() => boolean \| Promise<boolean>` | `-` |
+| `beforeOnCancel` | 取消前拦截 | `() => boolean \| Promise<boolean>` | `-` |
+| `onOk` | 点击确认回调 | `(event: Event) => void` | `-` |
+| `onCancel` | 点击取消回调 | `(event: Event) => void` | `-` |
+| `width` | 宽度 | `string \| number` | `368` |
+| `height` | 高度 | `string \| number` | `'auto'` |
+| `top` | 距离顶部位置 | `string \| number` | `0` |
+| `center` | 是否居中 | `boolean` | `true` |
+| `renderTo` | 挂载容器，找不到时回退到 body | `string \| HTMLElement` | `'body'` |
+| `hideCancel` | 是否隐藏取消按钮 | `boolean` | `false` |
+| `hideOk` | 是否隐藏确认按钮 | `boolean` | `false` |
+| `popupClass` | 弹层自定义类名 | `string` | `-` |
+
+
+### 返回值
+
+| 方法 | 说明 | 参数 |
+| --- | --- | --- |
+| `close()` | 关闭当前对话框 | `-` |
+| `update(options)` | 更新当前对话框配置 | `Partial<DialogOptions>` |
+
+
+### 无障碍说明
+
+Dialog 打开后会聚焦到首个可通过 Tab 到达的元素，有遮罩时 Tab / Shift+Tab 在对话框内部循环，无遮罩时不限制 Tab；`tabindex` 为负数的元素仍可通过业务代码聚焦，但不会作为顺序循环的边界。隐藏、inert 和禁用控件会被跳过，透明或零宽的输入仍可接受键盘焦点。没有可用的顺序焦点时聚焦对话框容器。
+
+正 `tabindex` 按数值排序，同值保持 DOM 顺序，再进入默认顺序；模态内部出现正值时，会按内部列表处理每次 Tab，避免进入页面外部的默认顺序。建议业务布局使用默认顺序。具名原生 radio 按选中项进入，未选时首焦点取首项，Tab 不重复遍历同组。下面用键盘打开后，焦点进入已选中的 B，Shift+Tab 到关闭按钮，再 Tab 返回 B。
+
+关闭或条件卸载会把焦点恢复到打开前仍在文档中的元素；若焦点已移到其他交互区域或后来打开的 Dialog，则保留当前焦点。对话框容器带有 `role="dialog"` 和标题关联，右上角关闭控件是可聚焦按钮。无标题时使用 `aria-label` 或 `aria-labelledby` 提供名称，可通过 `aria-describedby` 关联说明。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button, DialogComponent, Input } from 'x-next';
+import { ref } from 'vue';
+const visible = ref(false);
+const choice = ref('b');
+import type { InputHTMLAttributes } from 'vue';
+const nativeAttrs1 = { "aria-label": "单选组后的输入框" } satisfies InputHTMLAttributes;
+</script>
+<template>
+<Button @click="visible = true">键盘与原生单选组</Button>
+  <DialogComponent v-model="visible" title="单选组焦点">
+    <label><input type="radio" name="choice" value="a"
+      :checked="choice === 'a'" @change="choice = 'a'" /> A</label>
+    <label><input type="radio" name="choice" value="b"
+      :checked="choice === 'b'" @change="choice = 'b'" /> B</label>
+    <Input :input-attrs="nativeAttrs1"  placeholder="Tab 继续进入这里" />
+  </DialogComponent>
+</template>
+```
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./dialog-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。

package/AI_USAGE/components/draggable-api.md

@@ -0,0 +1,146 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Draggable 完整公开 API
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`，声明路径仅作定位。插槽类型未细化时，具体槽名与作用域见本地用法示例。
+
+## Draggable API
+
+公开声明：`dist/components/draggable/index.d.ts`。 类型中的 undefined 表示可省略；原始 prop 默认值不等于继承配置或服务默认值。
+
+### Props
+
+| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
+| --- | --- | --- | --- | --- |
+| clone | clone 模式下复制数据的方法 | undefined &#124; (element: any) => any | 否 | 未声明 |
+| animation | 拖拽动画时长 | undefined &#124; number | 否 | 未声明 |
+| ghostClass | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| group | Sortable 分组配置 | undefined &#124; string &#124; GroupOptions | 否 | 未声明 |
+| sort | 是否允许当前列表内部排序 | undefined &#124; false &#124; true | 否 | 未声明 |
+| disabled | 是否禁用拖拽 | undefined &#124; false &#124; true | 否 | 未声明 |
+| store | 见场景用法与类型 | undefined &#124; { get: (sortable: import("sortablejs")) => string[]; set: (sortable: import("sortablejs")) => void; } | 否 | 未声明 |
+| handle | 拖拽手柄选择器 | undefined &#124; string | 否 | 未声明 |
+| draggable | 可拖拽元素选择器 | undefined &#124; string | 否 | 未声明 |
+| swapThreshold | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| invertSwap | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| invertedSwapThreshold | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| removeCloneOnHide | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| direction | 见场景用法与类型 | undefined &#124; "horizontal" &#124; "vertical" &#124; (evt: SortableEvent, target: HTMLElement, dragEl: HTMLElement) => Direction | 否 | 未声明 |
+| chosenClass | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| dragClass | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| ignore | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| filter | 见场景用法与类型 | undefined &#124; string &#124; (this: import("sortablejs"), event: Event &#124; TouchEvent, target: HTMLElement, sortable: import("sortablejs")) => boolean | 否 | 未声明 |
+| preventOnFilter | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| easing | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| setData | 见场景用法与类型 | undefined &#124; (dataTransfer: DataTransfer, draggedElement: HTMLElement) => void | 否 | 未声明 |
+| dropBubble | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| dragoverBubble | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| dataIdAttr | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| delay | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| delayOnTouchOnly | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| touchStartThreshold | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| forceFallback | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| fallbackClass | 见场景用法与类型 | undefined &#124; string | 否 | 未声明 |
+| fallbackOnBody | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| fallbackTolerance | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| fallbackOffset | 见场景用法与类型 | undefined &#124; { x: number; y: number; } | 否 | 未声明 |
+| supportPointer | 见场景用法与类型 | 未在公开类型中细化 | 否 | 未声明 |
+| emptyInsertThreshold | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| scroll | 见场景用法与类型 | undefined &#124; false &#124; true &#124; HTMLElement | 否 | 未声明 |
+| forceAutoScrollFallback | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| scrollSensitivity | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| scrollSpeed | 见场景用法与类型 | undefined &#124; number | 否 | 未声明 |
+| bubbleScroll | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | 未声明 |
+| modelValue | 拖拽列表数据 | any[] | 否 | 未声明 |
+| tag | 外层渲染标签 | undefined &#124; string | 否 | 未声明 |
+| target | 指定拖拽目标元素选择器或元素 | undefined &#124; string | 否 | 未声明 |
+| customUpdate | 自定义同列表排序后的数据更新逻辑 | undefined &#124; (event: DraggableEvent) => void | 否 | 未声明 |
+| allowMove | 移动控制回调，返回 false 可阻止移动 | undefined &#124; (event: DraggableEvent, originalEvent: Event) => boolean &#124; void | 否 | 未声明 |
+| moveValidator | allowMove 的别名，适合表达校验语义 | undefined &#124; (event: DraggableEvent, originalEvent: Event) => boolean &#124; void | 否 | 未声明 |
+| onUpdate | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onStart | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onAdd | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onRemove | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onChoose | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onUnchoose | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onEnd | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onSort | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onFilter | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onClone | 见场景用法与类型 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+| onChange | 见场景用法与类型 | undefined &#124; ((evt: SortableEvent) => void) & ((...args: any[]) => any) | 否 | 未声明 |
+
+### Events
+
+| 事件 | 用途 | 监听器签名（即事件参数） |
+| --- | --- | --- |
+| update:modelValue | 列表顺序变化时触发 | undefined &#124; (...args: any[]) => any |
+| update | 同列表排序完成 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| start | 拖拽开始 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| add | 元素被添加到当前列表 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| remove | 元素从当前列表移出 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| choose | 选中拖拽元素 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| unchoose | 取消选中拖拽元素 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| end | 拖拽结束 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| sort | 排序发生变化 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| filter | 命中过滤元素 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| clone | 创建 DOM 克隆 | undefined &#124; ((event: SortableEvent) => void) & ((...args: any[]) => any) |
+| move | 移动过程监听事件；需要阻止移动时使用 allowMove / moveValidator | undefined &#124; ((evt: MoveEvent, originalEvent: Event) => boolean &#124; -1 &#124; 1 &#124; void) & ((...args: any[]) => any) |
+| change | Sortable change 事件 | undefined &#124; ((evt: SortableEvent) => void) & ((...args: any[]) => any) |
+
+### Slots
+
+| 名称 | 用途 | 公开类型 |
+| --- | --- | --- |
+| default | 拖拽内容 | 文档列出的实际插槽；公开类型未细化，作用域见场景用法 |
+
+### 实例方法 / 暴露值
+
+| 名称 | 公开类型 |
+| --- | --- |
+| start | (target?: HTMLElement) => void |
+| pause | () => void |
+| resume | () => void |
+| destroy | () => void |
+| save | () => void |
+| closest | (element: HTMLElement, selector?: string) => HTMLElement &#124; null |
+| toArray | () => string[] |
+| option | { <K extends keyof Options>(name: K, value: Options[K]): void; <K extends keyof Options>(name: K): Options[K]; } |
+
+### 关联类型定义
+
+以下摘自本组件族声明，供查阅嵌套配置；运行时和值类型均以根入口可导出项为准。
+
+```typescript-reference
+declare const CLONE_ELEMENT_KEY: unique symbol;
+
+interface DraggableEvent<T = any> extends SortableEvent {
+    item: HTMLElement & {
+        [CLONE_ELEMENT_KEY]: any;
+    };
+    data: T;
+    clonedData: T;
+}
+
+type SortableMethod = 'closest' | 'save' | 'toArray' | 'destroy' | 'option';
+
+interface UseDraggableReturn extends Pick<Sortable, SortableMethod> {
+    /**
+     * Start the sortable.
+     * @param {HTMLElement} target - The target element to be sorted.
+     * @default By default the root element of the VueDraggablePlus instance is used
+     */
+    start: (target?: HTMLElement) => void;
+    pause: () => void;
+    resume: () => void;
+}
+
+interface UseDraggableOptions<T> extends Options {
+    clone?: (element: T) => T;
+    immediate?: boolean;
+    customUpdate?: (event: DraggableEvent<T>) => void;
+}
+```
+
+
+返回 [Draggable 用法](./draggable.md)。