QXS-BNS

Appearance

本页导航

Components ​

@qxs-bns/components 提供的是可由宿主直接编排的 Web Components，核心场景是题目编辑、分页边界、统一图标入口、底部固定操作容器、上传前图片裁剪、文件上传、图片上传、图表看板，以及提交态数据驱动的运行时 helper。

组件接入口径已更新

当前 Components 文档里的组件，已经统一按跨框架 Web Components 方式发布。
如果你的业务页面原来是按 Vue 组件思路接入的，迁移时重点确认：

  • 是否已经改成直接使用 Custom Element 标签，而不是依赖旧的组件注册名
  • 是否把对象、数组、函数、布尔值改成了实例属性传值
  • 是否把事件消费改成了读取 CustomEvent.detail
  • 是否把列表、分页、提交数据这类业务状态留在宿主层，而不是继续向组件内要“容器能力”

更完整的迁移清单见 迁移指南。

单题组件接入 ​

如果你要做完整出题页，先确认宿主是否已经准备好题目数组、题型入口和编辑状态。
Web Components 页面的阅读顺序建议是：先跑单题组件，再接分页边界和导出 helper。

loading

运行时校验与提交数据 ​

单题组件能跑以后，再看分页边界、排序器和运行时 helper。
这部分主要解决“如何让宿主直接维护最终提交数据，并对当前 DOM 题目树统一校验”。

loading

页面定位 ​

  • 题目体系采用宿主直渲染模式，不再提供列表容器。
  • 宿主负责题目数组、题型入口、分页和业务字段，组件负责编辑、校验和导出。
  • 富文本编辑器可单独使用，不依赖整套题目能力。

你可以在这里找到什么 ​

模块说明入口
安装与接入包引入、导出 helper、宿主接入方式Installation
运行时答题容器兼容旧 list 数据和 onSubmit/reset 的答案容器AnswerContainer
旧页迁移速查一页看完 AnswerContainer 的旧页替换重点AnswerContainer 迁移速查
题目组件总览宿主接入方式、公共 API 和 helper 总览题目组件
选择与排序题单选、多选、排序题和互动问答单选/多选QxsSubjectSingle
填空题根据题干填空位维护答案组QxsBlankFill
问答题维护关键词、答题设置和参考答案QxsTextFill
量表题维护量表列和问题行QxsScale
分页 / 排序 / helper分页边界、排序器和 runtime helpers运行时与辅助组件
图标组件统一字符串型图标入口QxsIcon
固定操作栏底部固定操作容器FixedActionBar
图片裁剪工具上传前图片裁剪与裁剪结果回收PhotoCropTool
文件上传拖拽上传、限制扩展名和上传成功回调FileUpload
图片上传缩略图回填、预览查看与删除ImageUpload
数据图表图表、表格和地图看板DataChart
富文本编辑器独立编辑器能力富文本编辑器

推荐入口 ​

下一步 ​

  • 如果你要做完整出题页，先看 题目组件。
  • 如果你只关心某一个题型，直接进入对应单题型页面。
  • 如果你只需要独立编辑器，直接看 富文本编辑器。