QXS-BNS

Appearance

On this page

Components WC ​

@qxs-bns/components-wc 将题目能力封装为标准 Web Components，可在 Vue 3、React 和原生 HTML 中使用。

安装 ​

bash
pnpm add @qxs-bns/components-wc

基础引入 ​

ts
// 题目内核（不带编辑器）：默认推荐
import '@qxs-bns/components-wc/core'

// 需要题干富文本（qxs-subject-single / qxs-blank-fill / qxs-text-fill / qxs-scale）时再加：
import '@qxs-bns/components-wc/editor'
vue
<script setup lang="ts">
import { ref } from 'vue'
import '@qxs-bns/components-wc/core'

const subjectList = ref([])

function handleChange(e: CustomEvent) {
  subjectList.value = [...e.detail]
}
</script>

<template>
  <qxs-subject-list
    :subject-list.prop="subjectList"
    @change="handleChange"
  />
</template>

推荐入口 ​

优先使用 qxs-subject-type + qxs-subject-list 作为题目编辑入口。qxs-subject-type 负责选题型，qxs-subject-list 负责承接题目数组、事件冒泡、校验和导出。

在 Vue 3 中，数组、对象、函数等复杂类型建议使用连字符属性名配合 .prop 绑定。业务方需要自行承接标签、AI 推荐答案、题库搜索、跳题和关联检查等业务数据源与弹窗。原生 JS 命令式赋值时，请使用 subjectListEl['subject-list'] = list 这类写法。

快速接入 ​

Vue 3 ​

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

const subjectListRef = ref()
const subjectList = ref([])

function handleSelect(e: CustomEvent) {
  const { type, canSet } = e.detail
  subjectListRef.value?.addSubject(type, null, canSet ? 1 : 0)
}

function handleChange(e: CustomEvent) {
  subjectList.value = [...e.detail]
}
</script>

<template>
  <qxs-subject-type @select="handleSelect" />
  <qxs-subject-list
    ref="subjectListRef"
    :subject-list.prop="subjectList"
    @change="handleChange"
  />
</template>

React ​

tsx
import { useEffect, useRef } from 'react'
import '@qxs-bns/components-wc/core'

export default function QuizBuilder() {
  const listRef = useRef<any>(null)

  useEffect(() => {
    const typeSelector = document.querySelector('qxs-subject-type')
    const handleSelect = (e: Event) => {
      const detail = (e as CustomEvent).detail
      listRef.current?.addSubject(detail.type, null, detail.canSet ? 1 : 0)
    }

    typeSelector?.addEventListener('select', handleSelect)
    return () => typeSelector?.removeEventListener('select', handleSelect)
  }, [])

  return (
    <>
      <qxs-subject-type />
      <qxs-subject-list ref={listRef} />
    </>
  )
}

原生 HTML ​

html
<script type="module">
  import '@qxs-bns/components-wc/core'
  // 如需富文本能力再加：
  import '@qxs-bns/components-wc/editor'
</script>

<qxs-subject-type id="typeSelector"></qxs-subject-type>
<qxs-subject-list id="subjectList"></qxs-subject-list>

<script>
  const typeSelector = document.getElementById('typeSelector')
  const subjectList = document.getElementById('subjectList')

  typeSelector.addEventListener('select', (e) => {
    const { type, canSet } = e.detail
    subjectList.addSubject(type, null, canSet ? 1 : 0)
  })
</script>

组件概览 ​

题目组件 ​

组件说明
QxsSubjectList题目列表容器，负责增删改、校验、导出
QxsSubjectSingle单选题 / 多选题 / 排序题
QxsBlankFill填空题
QxsTextFill问答题
QxsScale量表题

辅助组件 ​

组件说明
QxsSubjectType题型选择器
QxsSubjectRichText题干富文本块
QxsEditor富文本编辑器
QxsPageEnd分页符

题型标识 ​

标识说明
single单选题
multiple多选题
sort排序题
blank_fill填空题
text_fill问答题
scale量表题
page_end分页符

适用场景 ​

  • 问卷、考试、量表等题目编辑器。
  • 需要跨框架复用题目组件的前端项目。
  • 希望把题目内核和业务弹窗层解耦的场景。

使用建议 ​

  • 题目场景优先只引入 @qxs-bns/components-wc/core，更轻量、构建链路更稳。
  • 如需富文本题干，再额外引入 @qxs-bns/components-wc/editor。
  • 宿主层应监听 change 事件，并把最新题目数组同步回外部状态。
  • 需要标签、AI、搜索、跳题、关联检查时，优先阅读 subject.md 中的业务接入契约。

浏览器支持 ​

浏览器版本
Chrome>= 64
Firefox>= 63
Safari>= 13
Edge>= 79

下一步阅读 ​