vue+element ui 实现跨题跳转
在我们平时开发过程中,常规编写答题是做完上一道就会跳转到下一道题,但是我最近遇到的需求是有一定的逻辑性,比如我选择不同的选项,会跳转到相对应的题目,由于代码量过多,所以我把部分关键代码展示出来,下面是我实现的过程。
我的题有单选和多选,所以我用v-if判断显示和隐藏。
:disabled="disabledInspect"是控制答题过程的可操作性,也就是操作过的题不可编辑。
<!--单选-->
<el-radio-group v-model="resource[index]"
v-if="!(paper[index].num===7||paper[index].num===8||paper[index].num===9||
paper[index].num===11||paper[index].num===12||paper[index].num===16||
paper[index].num===17)"
>
<el-radio class="choice-radius" v-for="item in paper[index].selective"
:label="item.value" :key="item.value" :disabled="disabledInspect"
>{{item.label}}</el-radio>
</el-radio-group>
<!--多选-->
<el-checkbox-group v-model="multi"
v-if="paper[index].num===7||paper[index].num===8||
(paper[index].num===11&&conceal === false)||
paper[index].num===12||paper[index].num===16||
paper[index].num===17">
<el-checkbox class="choice-radius"
name="type"
v-for="item in paper[index].selective"
:label="item.value"
:key="item.value"
:disabled="disabledInspect"
>{{item.label}}</el-checkbox>
</el-checkbox-group>
题目结构:
num是题目编号,selective是选项
[
{
"num": 1,
"title": "......................",
"selective": [
{ "label": "是",
"value": "0",
"selected": "1"
},
{ "label": "否",
"value": "1",
"selected": "2"
}
]
}
]
点击下一题的js代码:
this.disabledInspect控制点击下一题的可操作性,temporary是点击选项的标识。这里的case3我说明一下,这道题我首先判断选项数量是否够3个,然后我再判断选项正确性。
this.disabledInspect = false
let temporary = this.resource[this.index]
switch (this.paper[this.index].num) {
case 1:
if (temporary === '0') {
if (this.flip.indexOf(0) === -1) {
this.flip.push(this.index)
}
this.index += 1
} else if (temporary === '1') {
this.index = 2
} else {
this.$message('请选择选项')
}
;break
case 2:
if (temporary === '0') {
if (this.imageUrl !== '') {
this.index = 3
this.imageUrl = ''
} else {
this.$message.error('请上传照片')
}
} else {
if (this.imageUrl !== '') {
this.index = 5
flag = true
this.imageUrl = ''
} else {
this.$message.error('请上传照片')
}
}
;break
case 3:
if (this.multi.join('').length === 3) {
if (this.multi.join('').indexOf('0') !== -1 &&
this.multi.join('').indexOf('1') !== -1 &&
this.multi.join('').indexOf('3') !== -1) {
this.index = 7
this.storage[0] = this.multi
this.multi = []
} else {
this.$message.error('请查看相关规章要求后重新作答')
this.index = 6
this.multi = []
this.storage = {}
}
} else {
this.$message.error('请查看相关规章要求后重新作答')
this.index = 6
this.multi = []
this.storage = {}
}
;break
}
//添加操作过的题的索引
if (this.flip.indexOf(this.index) === -1) {
this.flip.push(this.index)
}
},
点击上一题的js代码:
这里的flip是我们每点击一次下一题会存到flip数组里,这样在我们点击上一题时候,将flip传给index(题目角标),就可以实现跨题跳转了。
case6-16是将存在storage对象中的数组赋给multi,这样我们在点击上一题的时候,就不会看到没选中的问题了。
// 上一题
previous () {
if (this.index !== 0) {
this.disabledInspect = true
this.obtain = --this.flip.length
this.index = this.flip[this.obtain - 1]
switch (this.index) {
case 6 :
this.multi = this.storage[0]
break
case 7 :
this.multi = this.storage[1]
break
case 10 :
this.multi = this.storage[2]
break
case 11 :
this.multi = this.storage[3]
break
case 15 :
this.multi = this.storage[4]
break
case 16 :
this.multi = this.storage[5]
break
}
}
},
如果有什么问题,欢迎大家在下面留言