@composy/exam-vue
在线考试与测评 Vue 3 组件库 - 基于 @composy/exam-core 核心的 Vue 3 适配层
在应用入口导入 @composy/exam-vue/index.css，并加载 packages/color 与 packages/size 提供的全局
--ld-* 变量。Exam 主题变量只作用于考试组件根节点。
安装
pnpm add @composy/exam-vue
快速开始
全局安装
import { ExamPlugin } from '@composy/exam-vue'
app.use(ExamPlugin)
按需使用
<template>
<ExamDesigner :paper="paper" :theme="theme" @change="onPaperChange" />
<ExamPlayer :paper="paper" :duration="120" :show-timer="true" @submit="onSubmit" />
</template>
<script setup lang="ts">
import { ExamDesigner, ExamPlayer } from '@composy/exam-vue'
import type { ExamPaper } from '@composy/exam-vue'
const paper = ref<ExamPaper>({/* ... */})
const theme = ref<'light' | 'dark'>('light')
const onPaperChange = (p: ExamPaper) => {
/* ... */
}
const onSubmit = answers => {
/* ... */
}
</script>
组件
ExamDesigner
| Prop |
类型 |
默认值 |
说明 |
paper |
ExamPaper |
- |
试卷数据 |
questionBank |
Question[] |
- |
题库数据 |
theme |
'light' | 'dark' |
'light' |
主题 |
draggable |
boolean |
true |
是否允许拖拽排序 |
| Event |
参数 |
说明 |
change |
ExamPaper |
试卷变更 |
question:add |
Question |
添加题目 |
question:remove |
string |
移除题目 |
ExamPlayer
| Prop |
类型 |
默认值 |
说明 |
paper |
ExamPaper |
- |
试卷数据 |
duration |
number |
- |
考试时长(秒)，默认使用试卷时长 |
theme |
'light' | 'dark' |
'light' |
主题 |
showAnswerCard |
boolean |
true |
显示答题卡 |
showTimer |
boolean |
true |
显示计时器 |
antiCheat |
boolean |
false |
启用防作弊 |
autoSave |
boolean |
true |
启用自动保存 |
schemaVersion |
string |
- |
题库/答卷 schema 版本 |
attemptId |
string |
- |
隔离本地恢复会话的考试尝试 ID |
serverDeadline |
number |
- |
服务端截止时间（Unix 毫秒） |
serverTime |
ServerTimeSnapshot |
- |
服务端校时快照 |
| Event |
参数 |
说明 |
answer |
(questionId, answer) |
答题 |
submit |
AnswerRecord[] |
提交 |
timeup |
- |
时间到 |
cheat:detected |
string |
作弊检测 |
cheat:signal |
AntiCheatEvent |
透明审计信号，不代表最终结论 |
autosave |
AnswerRecord[] |
自动保存 |
Composables
useExamDesigner
const {
instance,
paper,
create,
setPaper,
addQuestion,
removeQuestion,
randomGenerate,
addSection,
setTheme,
destroy,
} = useExamDesigner()
useExamPlayer
const {
instance,
answers,
currentIndex,
remainingTime,
scoreResult,
create,
setAnswer,
goToQuestion,
next,
prev,
toggleFlag,
submit,
autoScore,
getPaper,
getAttemptSnapshot,
pauseTimer,
resumeTimer,
setTheme,
destroy,
} = useExamPlayer()
子路径导出
| 路径 |
说明 |
@composy/exam-vue |
主入口 |
@composy/exam-vue/composables |
组合式函数 |
@composy/exam-vue/plugins |
Vue 插件 |
构建产物
dist/ # UMD 格式
es/ # ESM 格式
esm/ # ESM 格式
lib/ # CJS 格式
配置
Builder、ESLint 与 ESM/CJS TypeScript 权威配置位于 .ldesign/。Vue 包只提供基于
@composy/exam-core 的组件、composable 和插件；框架无关的考试逻辑由 Core 维护。
验证命令
pnpm run type-check # Vue SFC、ESM 与 CJS TypeScript 检查
pnpm run lint:check # 严格 ESLint 检查
pnpm run build # 构建
依赖
@composy/exam-core - 核心引擎vue ^2.7.0 || ^3.5.32 (peerDependency)
License
MIT