# 前端二次开发说明
## 组件说明
前端组件统一放在`components`文件夹中。
### 答题组件
答题组件文件位于`components/kz-question/kz-question.vue`，组件已完成以下模式：
* 考试模式
* 练习模式
* 看题模式
模式功能区别：
| 模式功能 | 考试模式 | 练习模式 | 看题模式 |
| --- | :-: | :-: | :-: |
| 倒计时、自动交卷 | ☑️ | × | × |
| 试题收藏、取消收藏 | ☑️ | ☑️ | ☑️ |
| 错题删除 | × | × | ☑️ |
| 选题后显示是否正确、显示题目解析 | × | ☑️ | ☑️ |
#### 常用组件参数
| 组件参数 | 说明 |
| --- | --- |
| mode | 模式，可传参数：
EXAM：考试模式
TRAINING：练习模式
VIEW：看题模式 |
| title | 试卷标题 |
| questions | 试题集合 |
| limit\_time | 考试时间（倒计时/秒） |
| configs | 考试配置（配置判断题/单选题/多选题的每题分数） |
| canCollect | 是否显示收藏试题按钮 |
| canDeleteWrong | 是否显示删除错题按钮 |
#### 事件
| 事件名称 | 说明 |
| --- | --- |
| submitQuestion | 自动交卷事件 |
#### 使用示例
考试模式：
~~~js
<!-- 答题组件 -->
<kz-question v-show="result == null" mode="EXAM" :title="paper_name" :questions="questions" :configs="configs" :limit_time="limit_time" @submitQuestion="submitQuestion"></kz-question>
~~~
看题模式：
~~~js
<!-- 答题组件 -->
<kz-question mode="VIEW" title="我的错题" :questions="list" v-show="!showNodata" :canDeleteWrong="true" v-on:refresh="refresh"></kz-question>
~~~
