npm package: @alicd/crui-task-sorter
Description: --- category: Components type: UI Views component: Overlay chinese: 排序面板 english: TaskSorter ---
Author: @alicd/walle
Latest version: 0.0.21

---
category: Components
type: UI Views
component: Overlay
chinese: 排序面板
english: TaskSorter
---

可以对序列数据进行排序、删除等操作，并且提供了设置设置按钮的插槽，一般用于表格列设置（排序或者移除某些列的展示等）。

## API

### TaskSorter

|   成员   | 说明 | 类型 | 默认值 |
| ----- | ----- | ----- | ----- |
| dataSource | 列表数据数据源（`value` 属性为唯一标识，不能出现重复）。 | `[{ text: string, value: any}]`| `[ ]` |
| disabled | 是否禁用条目的删除功能 | `boolean` | `false` |
| draggable | 是否启用条目的拖动重排序功能 | `boolean` | `true` |
| visible | 是否显示弹层, 如果此属性为 `false`，弹层不会被渲染 | `boolean` | `false` |
| title | 设定弹层标题 | `string` 或 `number` | `"排序设置"` |
| width | 设定弹层宽度 | `number` | `300` |
| height | 设定弹层高度 | `number` | `500` |
| onOk | 点击确定按钮触发的事件 | `(data: object[]) => void` | 默认不执行任何操作 |
| onCancel | 点击取消按钮触发的事件 | `(e: object[]) => void` | 默认不执行任何操作 |
| loading | 设置弹层载入状态 | `boolean` | `false` |
| showTitle | 是否显示标题 | `boolean` | `true` |
| showFooter | 是否显示弹层底部的按钮栏 | `boolean` | `true` |
| hasMask | 是否显示遮罩 | `boolean` | `true` |
| onDragStart | 用户开始进行拖动重排时触发的事件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |
| onDragEnter | 数据条目刚刚拖动到另一条目上时触发的条件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |
| onDragOver | 数据条目拖动过程中，当指针悬浮于另一条目上时，持续触发这一事件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |
| onDragLeave | 数据条目拖动过程中指针离开另一条目时触发的条件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |
| onDrop | 拖动重排结束时触发的事件 | `(params: { event: Event, dragNode: OrderNode, dragNodesKeys: number, node: OrderNode, dropPosition: number, dropToGap: boolean }) => boolean` | 默认不执行任何操作 |
| canDrop | 某一数据条目是否可被拖动到另一数据条目之上 | `(params: { dragNode: OrderNode, dragNodesKeys: number, node: OrderNode, dropPosition: number, dropToGap: boolean }) => boolean` | 默认始终返回 `true` |
| onChange | 数据条目被重排或删除后触发的事件 | `(data: object[]) => void` | 默认不执行任何操作 |
| className | 自定义类名 | `string` | N/A |
| canCloseByEsc | 是否支持 esc 按键关闭弹层 | `boolean` | true |
| canCloseByOutSideClick | 点击弹层外的区域是否关闭弹层 | `boolean` | `true` |
| canCloseByMask | 点击遮罩区域是否关闭弹层 | `boolean` | `true` |
| animation | 配置动画的播放方式 | `object` 或 `boolean` | `{ "in": "expandInDown", "out": "expandOutUp" }` |
| target | 配置弹层定位的参照元素 | `any` | `Position.VIEWPORT` |
| align | 弹层相对于target的定位, 详见开发指南的[定位部分](#定位) | `string` 或 `boolean` | `"cc cc"` |
| offset | 弹层相对于target定位的微调 | `number[2]` | `[0, 0]` |
| beforeClose | 弹层关闭前触发的事件 | `() => void` | 默认不执行任何操作 |
| onClose | 弹层关闭后触发的事件 | `() => void` | 默认不执行任何操作 |
| afterClose | 弹层关闭后触发的事件, 如果有动画，则在动画结束后触发 | `() => void` | 默认不执行任何操作 |
| beforeOpen | 弹层打开前触发的事件 | `() => void` | 默认不执行任何操作 |
| onOpen | 弹层打开后触发的事件 | `() => void` | 默认不执行任何操作|
| afterOpen | 弹层打开后触发的事件, 如果有动画，则在动画结束后触发 | `() => void` | 默认不执行任何操作 |
| onRequestClose | 弹层请求关闭触发的事件。**参数**: _reason_: `string` 弹层关闭的来源 _e_: `Event` DOM 事件 | `(reason: string, e: Event) => void` | 默认不执行任何操作 |
| beforePosition | 弹层定位完成前触发的事件 | `() => void` | 默认不执行任何操作 |
| onPosition | 弹层定位完成后触发的事件。**参数**: _config_: `object` 定位的参数 _node_: `object` 定位的元素 | `(config: object, node: object) => void` | 默认不执行任何操作 |
| autoFocus | 弹层打开的时候是否让里面的元素自动获取焦点 | `boolean` | `false` |
| cache | 隐藏时是否保留子节点 | `boolean` | `false` |
| safeNode | 安全节点,当点击 document 的时候, 如果包含该节点则不会关闭弹层, 如果是函数需要返回 ref, 如果是字符串则是该DOM的 id, 也可以直接传入DOM节点 | `any` | N/A |
| wrapperClassName | 弹层的根节点的样式类 | `string` | N/A |
| container | 指定渲染组件的容器 | `any` | N/A |
| shouldUpdatePosition | 强制更新定位信息 | `boolean` | N/A |
| needAdjust | 是否自动调整定位的位置 | `boolean` | N/A |
| disableScroll | 是否禁用页面滚动 | `boolean` | `true` |
| prefix | 样式类名的品牌前缀 | `string` | `"next-"` |
| showDelete | 是否展示条目前面的删除图表， 设置为 false 则无法删除 | `boolean` | `true` |

### TaskSorter.Setting

用于设置任务面板右上角的元素。