AnswerContainer ​

qxs-answer-container 是给旧答题页准备的运行时容器。
它接住 components-v2 时代的 list 数据结构，负责排序、补 titleIndex、按 examTypeEnum 分发题型，并继续暴露 onSubmit() / reset()。

如果你现在做的是新出题页，优先看 题目组件。
如果你手里是已经存在的问卷、病例答题或随访问卷页面，这个容器更适合做第一步迁移。

基础用法 ​

import '@qxs-bns/components/answer-container'

如果你已经全量引入：

import '@qxs-bns/components'

主题 ​

第一版保留了 default 和 case-practice 两个主题名，方便旧页面先迁移运行时结构，再慢慢收视觉。

扩展交互 ​

旧 AnswerContainer 里最难迁的是关系题入口和扩展渲染位。这一版已经补了 relation-exam-answer 和 answer-row-relation-exam-answer 对应的 renderer 属性。

使用说明 ​

• list 推荐通过 .prop 传入，保持对象和数组不被序列化。
• beforeChange 也推荐通过 .prop 传入，返回 false 时可阻止当前题目的答题变更。
• type 可控制文字题和填空题是否保持可编辑态。
• isShowProgress 可在运行时标题区展示题目进度标签。
• showSingleRowScaleTitle 可控制单行量表是否强制显示左侧标题列。
• onSubmit() 会逐题收集当前提交结果，返回 Promise<LegacyAnswerContainerItem[]>。
• reset() 会清空容器内部的 submitAnswer 状态，但不会反向改写宿主原始数组。
• 当前兼容题型：single、multiple、blank_fill、sort、scale、text_fill。

宿主接入示例 ​

对齐到哪些旧页面 ​

当前这批 demo 主要对齐的是 ksh-doctor 里这几类高频接法：

• QuestionnaireDetailInfo.vue
• QuestionnaireDetailInfoPreview.vue
• NewVisitDetail.vue
• SceneExam/index.vue
• case-practice/detail.vue
• case-practice/exam-comment.vue

下面这些同类页面，当前也可以按同样的心智先迁移：

• views/live/components/conditions-packet.vue
• components/FirstAnswer.vue

这些场景的共同点是：

• 都是把旧 list 直接交给容器
• 都依赖 disabled / isShowCorrect / themeName
• 都可能带 type / isShowProgress / showSingleRowScaleTitle
• 都会通过 ref.onSubmit() 或只读回显来驱动宿主页面
• 部分页面对 beforeChange 和 @on-change 很敏感

第一阶段还没覆盖的旧接口 ​

这版运行时容器已经补回了大部分高频合同，但仍然不是旧 Vue 2 容器的逐像素复刻。当前先不要假设这些已经完全一样：

像 case-practice/case-answer.vue 这种依赖 relation-exam-answer 和命名 slot 的页面，目前还不属于“直接无感替换”的范围。

• 旧 Vue 2 slot 和现在的 renderer property 在实现方式上不完全等价。
• 关系题、讨论区、结果回显都已经有迁移入口，但宿主业务流程本身仍然需要页面层接管。

如果你的旧页面强依赖这些能力，建议先把 demo 和文档对齐当前运行时能力，再决定是继续补容器扩展点，还是下沉到单题组件处理。

Vue ​

<script setup lang="ts">
import { ref } from 'vue'
import '@qxs-bns/components/answer-container'

const answerRef = ref<any>(null)
const questionList = ref([
  {
    examId: 1,
    examIndex: 1,
    examTypeEnum: 'single',
    title: '请选择患者当前主要症状',
    answers: [
      { examAnswerId: 11, answer: '胸闷' },
      { examAnswerId: 12, answer: '呼吸困难' },
    ],
  },
])

async function handleSubmit() {
  const result = await answerRef.value?.onSubmit()
  console.log(result)
}
</script>

<template>
  <qxs-answer-container
    ref="answerRef"
    :list.prop="questionList"
    :before-change.prop="() => true"
  />
</template>

原生 HTML ​

<script type="module">
  import '@qxs-bns/components/answer-container'

  const container = document.querySelector('qxs-answer-container')
  container.list = [
    {
      examId: 1,
      examIndex: 1,
      examTypeEnum: 'text_fill',
      title: '请填写本次复诊总结',
    },
  ]

  document.querySelector('#submit').addEventListener('click', async () => {
    const result = await container.onSubmit()
    console.log(result)
  })
</script>

<qxs-answer-container></qxs-answer-container>
<button id="submit">提交</button>

API ​

属性 ​

方法 ​

事件 ​

兼容字段 ​

第一版重点兼容这些旧字段：

• examId
• examIndex
• examTypeEnum
• titleIndex
• answers
• submitAnswer
• customBinds
• leastAnswerCount
• scaleQuestionList
• pageIndex
• examAnswerResults
• examExpand

相关文档 ​

• AnswerContainer 迁移速查
• Components 安装
• 题目组件
• 运行时与辅助组件