QXS-BNS

Appearance

本页导航

快速开始 ​

本指南帮助你用最短路径跑通 QXS-BNS 当前的组件体系。

Components 已切到跨框架方案

@qxs-bns/components 当前提供的是 Web Components，不再只面向 Vue 组件树。
如果你要在已有页面里接入组件，请先确认：

  • 页面入口已经直接引入了 @qxs-bns/components 或对应子入口
  • Vue 里传对象、数组、函数、布尔值时优先使用 .prop
  • 事件数据从 CustomEvent.detail 读取

完整迁移对照见 Components 迁移指南。

三步跑通第一个页面 ​

建议先跑最小接入，再决定后面要不要引入更多模块。
这套顺序适用于组件、工具、Hooks 和指令，不需要针对每个包重新发明接入流程。

loading

选择导入入口 ​

如果你在同一个页面里会同时用组件、工具和指令，先把导入方式统一好。
这样后面的示例代码更容易直接复制进项目。

loading

安装 ​

bash
pnpm add @qxs-bns/components
pnpm add @qxs-bns/utils
pnpm add @qxs-bns/hooks
pnpm add @qxs-bns/directives

第一个组件示例 ​

下面这个例子同时覆盖了两个典型场景：

  • 使用 qxs-data-chart 直接渲染业务报表
  • 使用 qxs-fixed-action-bar 提供底部固定操作区
vue
<template>
  <section class="page">
    <qxs-data-chart
      show-type-name="bar"
      model-name="用户增长趋势"
      :data.prop="chartData"
    />

    <qxs-fixed-action-bar :padding.prop="12">
      <button type="button">保存草稿</button>
      <button type="button">提交</button>
    </qxs-fixed-action-bar>
  </section>
</template>

<script setup lang="ts">
import '@qxs-bns/components/data-chart'
import '@qxs-bns/components/fixed-action-bar'

const chartData = {
  data: [
    { 月份: '1月', 新增用户: 100 },
    { 月份: '2月', 新增用户: 180 },
    { 月份: '3月', 新增用户: 260 },
  ],
  desc: {
    colDesc: ['新增用户'],
    groupByDesc: [{ xAxis: true, colDesc: '月份' }],
    showDesc: {},
  },
}
</script>

第一个题目页示例 ​

如果你的目标是出题页，不需要先找一个“容器组件”。
推荐的接法是：宿主自己维护题目数组，再渲染单题组件。

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

const items = ref([
  {
    customId: crypto.randomUUID(),
    answerType: 'single',
    title: '默认单选题',
    analysis: '',
    isEdit: true,
    examRichTextContent: '',
    answers: [
      { title: '选项 A', isCorrect: false },
      { title: '选项 B', isCorrect: false },
    ],
  },
])
</script>

<template>
  <qxs-subject-single
    v-for="item in items"
    :key="item.customId"
    :custom-id="item.customId"
    :question-type="item.answerType"
    :title="item.title"
    :answer-list.prop="item.answers"
    :is-edit.prop="true"
  />
</template>

下一步 ​