QXS-BNS

Appearance

本页导航

分页、排序与运行时 Helper ​

题目场景除了四个单题组件之外，通常还会配合 qxs-page-end、qxs-subject-sortable 和 runtime helpers 使用。

分页边界 ​

qxs-page-end 负责分页边界的展示和宿主操作入口。
它不会参与最终导出，只参与页码换算和页面分段。

loading

排序器 ​

qxs-subject-sortable 只负责排序 UI，不维护题目数据。
宿主需要接收 sort-change 后返回的新数组，并自己保存顺序。

loading

运行时 Helper ​

运行时 helper 会直接面向当前 DOM 里的题目组件和分页边界工作。
推荐让宿主直接维护最终提交数据；这套 API 适合在“保存草稿”或“发布”之前统一校验，必要时再从当前 DOM 回收题目结果。

loading

使用说明 ​

分页边界不参与导出

qxs-page-end 只参与页码计算和宿主渲染，不会出现在最终导出的题目数组里。

排序器只负责 UI

qxs-subject-sortable 只返回新的排序结果，不负责保存状态。宿主需要自己维护排序后的数组。

运行时 API ​

qxs-page-end 属性 ​

名称说明类型默认值
custom-id分页边界唯一标识string''
current-page-index当前页码number1
total-page总页数number1
show-action是否显示操作区booleantrue
show-add是否显示“继续添加”入口booleantrue
show-delete-action是否显示内置删除按钮booleantrue

qxs-page-end 插槽 ​

名称说明
action自定义底部操作区

qxs-subject-sortable 属性 ​

名称说明类型默认值
items轻量题目数组，至少包含 customId / answerType / titleSubjectLikeItem[][]
label-renderer自定义排序项标题渲染函数(item: SubjectLikeItem, index: number) => string-

qxs-subject-sortable 事件 ​

名称说明Detail
sort-change排序完成后触发{ items, orderedIds, oldIndex, newIndex }

运行时 Helper ​

名称说明类型
collectSubjectElements(root)从宿主容器收集所有题目组件和分页边界(root: ParentNode) => SubjectElement[]
validateSubjectElements(elements)汇总执行每个元素的 validate()(elements: Iterable<SubjectElement>) => { valid: boolean; errors: SubjectError[] }
serializeSubjectElements(elements)当宿主没有直接维护提交态数据时，汇总执行每个元素的 toJSON()，并自动换算 pageIndex(elements: Iterable<SubjectElement>) => Promise<any[]>
insertPageBreak(items, index?)在指定位置插入分页符(items: SubjectLikeItem[], index?: number) => SubjectLikeItem[]
removePageBreak(items, customId)按 customId 删除分页符(items: SubjectLikeItem[], customId: string) => SubjectLikeItem[]
rebuildPageBreaksFromPageIndex(items)把带 pageIndex 的题目数组恢复成带分页边界的渲染数组(items: SubjectLikeItem[]) => SubjectLikeItem[]
serializeSubjectsWithPageIndex(items)把渲染数组中的分页符换算成真实题目的 pageIndex(items: SubjectLikeItem[]) => SubjectLikeItem[]
getPaginationMeta(items)获取每个分页符对应的页码信息(items: SubjectLikeItem[]) => PaginationMeta[]