@alicd/crui-task-sorter NPM

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

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

classnames prop-types @alicd/crui-icon-button @alicd/crui-task-overlay

@infinitebrahmanuniverse/nolb-_alicd @everything-registry/sub-chunk-43 @zalastax/nolb-_alicd @alicd/crui

0.0.21

6 years ago