简介

fs-reorder-list 用于列表型内容的顺序调整场景。V1 提供列表渲染、搜索过滤、恢复默认顺序、置顶/置底快捷操作、拖拽句柄和拖拽事件预留，适合导航顺序配置、模块排序等场景。

使用方法

局部引入，在页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-reorder-list": "/avaui-sub/fs-reorder-list/index"
}

代码演示

基础用法

API

属性

属性	说明	类型	默认值
items	排序数据源	Array	[]
searchable	是否显示搜索栏	Boolean	false
keyword	外部传入搜索词	String	''
keywordPlaceholder	搜索占位文案	String	请输入关键词
showReset	是否显示恢复默认入口	Boolean	false
resetText	恢复默认文案	String	恢复初始化设置
showMoveButtons	是否展示置顶/置底操作	Boolean	true
showDragHandle	是否展示拖拽句柄	Boolean	true
disabled	是否禁用交互	Boolean	false
maxHeight	列表最大高度	String	''
emptyText	空态文案	String	暂时还没有数据
extStyle	组件根节点附加样式	String	''

items 数据结构

items 为对象数组，组件约定每一项使用固定字段：

• id: 唯一标识
• name: 列表展示文案，同时用于搜索匹配

示例：

[
  {
    "id": "lifecycle",
    "name": "客户全生命周期看板页面"
  },
  {
    "id": "insight",
    "name": "客户满意度调查结果页面"
  }
]

约束说明：

• id 字段应保持唯一，组件内部排序和拖拽都依赖该值。
• name 字段会用于列表展示和搜索匹配。
• 除 id、name 外，其余字段会原样保留，并通过 change、reset、getValue() 返回。

事件

事件名	说明	回调参数
change	顺序变化或重置后触发	{ type, items, keyword, detail }
search	搜索词变化时触发	{ keyword, items }
reset	恢复默认顺序时触发	{ items }
dragstart	长按句柄开始拖拽时触发	{ id, item }
dragmove	拖拽移动过程中触发	{ id, touch }
dragend	结束拖拽时触发	{ id, item }

参数用途

• items: 组件输入数据源，固定读取每项的 id 和 name
• id: 唯一标识，用于排序定位、拖拽定位、事件回传
• name: 展示文案，用于列表显示和搜索匹配
• keyword: 外部控制搜索词
• keywordPlaceholder: 搜索框占位文案
• showReset: 是否显示恢复默认入口
• resetText: 恢复默认入口文案
• showMoveButtons: 是否显示置顶/置底图标按钮
• showDragHandle: 是否显示拖拽句柄
• disabled: 是否禁用排序交互
• maxHeight: 列表滚动区域最大高度
• emptyText: 空数据提示文案，会透传给 Imageholder
• extStyle: 组件根节点附加样式

内部派生字段不属于对外 API：

• listItems: 规范化后的内部列表，结构为 { id, name, item }
• visibleItems: 当前可见列表，附带拖拽态和按钮禁用态

方法

方法名	说明	返回值
getValue	获取当前排序结果	Array
reset	恢复默认顺序	-

说明

• V1 仅实现列表型排序能力。
• 当前拖拽能力处于骨架阶段，已预留句柄和事件，后续补充完整拖拽重排内核。

预览

打开预览