# 组件名:hsAnswer(在线考试动态表单组件)
### 作者:屈磊
### 效果:
![](https://img.kancloud.cn/cb/de/cbdeffdaf0ee707d4f711d22952dbf48_1165x789.png)
![](https://img.kancloud.cn/5d/02/5d02ab737585e67220352cdbed6aa16a_1147x774.png)
## 使用方式:
```
import hsExamAll from './answer/hs-exam-all.vue'
import hsAnswerJs from'./answer/mixins/hs-answer' 事件方法
<hsExamAll
:ruleForm="ruleForm"
:answerDada="answerDada"
:activeNumber="activeNumber"
:isStart="isStart"
:examinesAnswerStatus="examinesAnswerStatus"
:allTime="allTime"
:countTime="countTime"
@clickPrev="clickPrev"
@clickNext="clickNext"
@startTime="startTime"
@submit="submit"
/>
## 数据结构模板:
getData() {
for (let index = 0; index < 4; index++) {
const type = Math.floor(Math.random() * 3 + 1)
let topicType
if (type === 1) {
topicType = '单选'
const key = 'radio' + index
this.$set(this.ruleForm, key, '')
} else if (type === 2) {
topicType = '多选'
const key = 'checkbox' + index
this.$set(this.ruleForm, key, [])
} else {
const key = 'textarea' + index
this.$set(this.ruleForm, key, '')
}
if (type === 3) {
this.answerDada.push(
{
textarea: index + 1 + '.请提出您的宝贵意见,我们将不断改进,为您提供优质的文化内容:',
id: Math.random() * 10,
index: index + 1,
type: type,
required: true
}
)
} else {
this.answerDada.push(
{
id: Math.random() * 10,
index: index + 1,
type: type, /题目类型 1 单选 2 多选 3 问答题
required: true, //题目是否必填
topic: index + 1 + '.请问您最喜爱的资源类型是?【' + topicType + '】', //题目标题
children: [ //题目选项
{ option: 'A', answer: '新闻咨询类' },
{ option: 'B', answer: '图片展示类' },
{ option: 'C', answer: '视频类' },
{ option: 'D', answer: '直播类' }
]
}
)
}
}
},
```
### 说明:
// 表单数据
ruleForm {
radio + 数字 单选第几题 如 radio1 单选题题目数列号1
checkbox +数字 多选第几题 如 checkbox2 多选题目数列2
textarea +数字 填空第几题 如 textarea3 填空题目数列3
}
answerDada :[] 接受的题目数据
问卷/考试数据结构一致,可通用
countTime: "00:30:00", //答题限定完成时间
timeInterval: null, //定时
updateTime: 30 * 60 * 1000, //默认 30 分钟内需完成答题
allTime: 30,//答题时间
isStart: false, //是否开始
activeNumber: 0, // 答题开始题目的数列号
examinesAnswerStatus: 0,//考试结果 1 合格,2不合格
### 参数:
| 参数 | 作用 | 类型 | 默认 | 是否必传 | 属性 |
| --- | --- | --- | --- | --- | --- |
|answerDada|题目数据 | Array | | 是 | |
|ruleForm|答题表单数据| Object | | 是 | |
|activeNumber|考试的题目的数列号|Number| 0 | 是 | |
|countTime|倒计时时间|String| 00:30:00 | 是 | |
|isStart|答题表单数据|Boolean| false | 是 | |
|examinesAnswerStatus|考试结果|Number|0| 是 | |
|allTime|答题总时长|Number|30| 是 | |
- 快速开发
- 使用vscode模板
- 样式和字体图标
- 现有组件封装
- 编写公共组件
- 编写页面
- 组件混入配套
- 前后端分离
- 开发规范
- 目录结构
- 工具类
- 组件库
- 项目总览
- 后端联调方式
- 简介
- 页面接口数据对接方式
- 事件
- vue pc公共组件
- 列表组件(通用)
- 列表组件带分页
- 文化资讯列表
- 新闻列表组件
- 详情侧边列表组件
- 活动预约组件
- 章节目录组件
- 名师列表组件
- 场馆导航列表组件
- 资讯列表组件
- 首页子站指数通用组件
- 活动列表通用组件
- 专辑列表组件
- 相关推荐列表组件
- 视频组件
- 直播视频组件
- 视频组件
- 课程视频组件
- 讲师介绍简介
- 问卷答题组件
- 问卷调查组件
- 在线考试组件整套
- 在线考试组件
- 菜单
- 导航菜单
- 分类组件
- 分类菜单
- 排序组件
- 全局组件
- 面包屑导航
- 无数据状态
- 评论
- 文章展示
- 点赞收藏查看分享组件
- 时间日历日期组件
- 直播日历组件
- 底部导航组件
- 底部组件
- 头部组件
- 首页组件
- 资讯组件
- 直播组件
- 阅读组件
- 线上培训组件
- 登录注册相关组件
- 地图组件
- 媒体相关组件
- 音频详情组件
- 音频列表组件
- 书刊详情组件
- 视频播放组件
- 个人中心组件
- 我的评论
- 我的活动
- 我的收藏
- 个人中心列表
- 个人中心我的评论
- 弹窗组件
- 图片,视放大弹窗组件
- 票务预定组件
- 轮播组件
- 横排滑动组件
- 3D轮播组件
- 首页试听空间轮播组件
- 新闻资讯轮播组件
- 缩略图轮播组件