@alicd/crui-task-sorter

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

Usage no npm install needed!

<script type="module">
  import alicdCruiTaskSorter from 'https://cdn.skypack.dev/@alicd/crui-task-sorter';
</script>

README

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

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